/* ═══════════════════════════════════════════════════════════════════════ LA LETRA · Inter, autoalojada (SIL Open Font License) ⛔ ESTO FALTABA Y SE NOTABA EN TODO. `font-family` ya decía 'Inter' desde siempre, pero NADIE la cargaba: no había @font-face, ni enlace, ni archivo. Todas las pantallas caían a la letra del sistema —Segoe UI en Windows— y encima el CSS pedía `cv05` y `ss01`, que son variantes que SOLO existen en Inter y que por lo tanto no hacían nada. El diseño estaba afinado para una letra que no estaba puesta. ⭐ Va autoalojada, no desde Google Fonts: sin petición a un tercero, sin que la pantalla parpadee esperando a un servidor ajeno, y sin que un corte de ellos nos cambie la cara del producto. ⭐ Recortada a lo que usa el español: de 343 KB a 103 KB (70% menos). Se comprobó que no falta ni una letra acentuada, ni ¿ ¡ « » — · … → ←. Es VARIABLE en dos ejes: · wght 100-900 → todos los pesos en un solo archivo · opsz 14-32 → la letra se dibuja distinta en chico que en grande; eso lo prende `font-optical-sizing`. ═══════════════════════════════════════════════════════════════════════ */ @font-face{ font-family:'Inter'; src:url('inter.woff2') format('woff2-variations'); font-weight:100 900; font-style:normal; font-display:swap; /* se lee desde el primer instante con la del sistema */ unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC, U+2000-206F,U+2074,U+20AC,U+2122,U+2190-2193,U+2212,U+2215,U+FEFF,U+FFFD; } /* ═══════════════════════════════════════════════════════════════════════ RIVO · SISTEMA VISUAL Un solo archivo manda sobre todas las hojas del sistema. Tres decisiones que lo sostienen: 1. LA PROFUNDIDAD SE HACE CON COLOR, NO CON SOMBRA. Sobre fondo oscuro una sombra casi no se ve; lo que sí se lee es que una superficie esté un paso más clara. Por eso hay una escalera de 5 superficies y las sombras quedan solo para lo que flota de verdad (modales). 2. EL CHROME SE CALLA. Menos bordes, menos decoración. La jerarquía la cargan el peso de la letra y el aire, no las líneas. 3. EL COLOR SIGNIFICA. Azul = acción. Verde, ámbar y rojo = estado. Nada se pinta “porque se ve bonito”. ═══════════════════════════════════════════════════════════════════════ */ :root{ /* ── Superficies: cada paso es “un piso más arriba” ── */ --s0:#0a0b0d; /* el fondo de todo */ --s1:#0f1115; /* chrome: cabecera y barras */ --s2:#14171c; /* tarjetas */ --s3:#1a1e24; /* dentro de una tarjeta: campos, celdas */ --s4:#222730; /* algo levantado: hover, seleccionado */ /* ── Líneas: casi invisibles a propósito ── */ --l1:rgba(255,255,255,.055); --l2:rgba(255,255,255,.10); --l3:rgba(255,255,255,.16); /* ── Texto: tres niveles, no más ── */ --t1:#e9ecf1; /* lo que se lee */ --t2:#98a3b3; /* lo que acompaña */ /* ⛔ Era #68727f y daba 4.03 de contraste sobre el fondo — por debajo del mínimo legible, que es 4.5. Se midió, no se opinó: cuatro textos de la pantalla de inicio estaban ahí (el subtítulo, la descripción de cada ficha y el nivel). #7c8794 es el valor MÁS TENUE que pasa en las tres superficies a la vez (4.58 en la peor). Se eligió el mínimo a propósito: subirlo más aplana la jerarquía que este gris existe para crear. */ /* ⛔⛔ ESTE GRIS SE QUEDO CORTO POR CULPA DE LAS MEJORAS DE ESTE MISMO LOOP. Medido el 21-ago con el color DECLARADO (el pixel no vale para texto: el suavizado lo mezcla con el fondo y da un numero falso): #7c8794 sobre --s0 = 5.39 · sobre --s2 = 4.92 #7c8794 sobre --s3 = 4.58 · sobre --s4 = 4.10 ⛔ La norma pide 4.5 para texto normal. Mientras las superficies estuvieron en --s0 y --s2 el gris pasaba; en las vueltas 2 a 5 las tarjetas, los indicadores y las ventanas subieron a --s4 —que era lo correcto, porque abajo eran invisibles— y de paso empujaron este gris por debajo de la linea justo donde mas se usa: los pies de tarjeta, las etiquetas de los indicadores y las notas de las ventanas. ⭐ Sube a #868f9c, que da 4.61 sobre --s4 y 6.02 sobre --s0. Es lo justo para cruzar la linea sin comerse el escalon con --t2 (#98a3b3): siguen siendo dos grises distintos, y el de apoyo sigue pareciendo de apoyo. ⛔ Subirlo mas seria peor: dos grises que se parecen no informan de nada. */ --t3:#868f9c; /* lo que casi no importa — pero que aun así se lee */ /* ── Marca y estados ── */ /* ⛔ 17-ago-2026. Aquí vivía `--brand:#3b82f6`, que es azul Tailwind 500: el color más repetido de la web. No era de Rivo, era de nadie. El logotipo tiene dos colores propios, y se midieron los tres contra el fondo (#0a0b0d) ANTES de decidir nada: marino #032e69 → 1.50 ⛔ inusable, se lo traga el fondo azul de hoy → 5.35 · pero BLANCO SOBRE ÉL da 3.68, que REPRUEBA el mínimo de 4.5. Los botones no contrastaban. amarillo #ffde00 → 14.72 ✅ el más alto de toda la paleta, y NEGRO sobre él da 14.72 también. Por eso el amarillo pasa a ser el color de ACCIÓN: es a la vez lo más legible y lo más de Rivo — casi nunca coinciden las dos cosas. El azul no se va: se queda para lo estructural, un peldaño más claro para que también pase el mínimo. */ --brand:#4b86f0; /* ⭐⭐ DOS AZULES, DOS PAPELES — no es un capricho, es una medida: · `--brand` (#4b86f0) es de RELLENO. Sobre el va letra blanca, y ahi da 3.52, que es lo que pide la norma para un elemento de interfaz. ⛔ NO SE PUEDE ACLARAR: si se aclara, el blanco de encima baja a 2.64. · `--brand-hi` (#6f9ff5) es de TEXTO: 7.46 sobre el fondo y 5.68 sobre una tarjeta. El `--brand` como letra da solo 4.26 sobre tarjeta y 3.60 dentro de su propia pastilla, o sea por debajo de la norma. ⭐ Regla: si el azul lleva letra encima, `--brand`; si el azul ES la letra, `--brand-hi`. La prueba 26 vigila las dos cosas. */ --brand-hi:#6f9ff5; --brand-soft:rgba(75,134,240,.13); --brand-line:rgba(75,134,240,.34); /* La ACCIÓN: el amarillo del logotipo. ⛔ SIEMPRE con texto oscuro encima: blanco sobre amarillo da 1.34 y no se lee. */ --accion:#ffde00; --accion-hi:#ffe947; --accion-txt:#101318; --accion-soft:rgba(255,222,0,.12); --accion-line:rgba(255,222,0,.32); --ok:#3ecf8e; --ok-soft:rgba(62,207,142,.11); --ok-line:rgba(62,207,142,.26); /* ⚠️ Corrido hacia el naranja el 17-ago: el ámbar de antes (#f0b44a) queda pegadísimo al amarillo de marca, y un aviso que se parece al botón normal deja de avisar. */ --warn:#f59148; --warn-soft:rgba(245,145,72,.11); --warn-line:rgba(245,145,72,.28); /* ⛔⛔ MEDIDO EL 21-AGO con el color declarado: el rojo daba **4.28** sobre su propio `-soft`, que es como se pinta casi siempre —letra roja dentro de una pastilla roja muy tenue—, con la norma pidiendo 4.5. Justo el color que avisa de un problema era el que peor se leia. ⭐ Sube a #f47b80: 5.70 sobre `--s4` y 5.02 sobre su pastilla. ⛔ Se comprobo antes de tocarlo que no lleva letra encima en ningun lado: sus dos usos como RELLENO son barras de grafica, sin texto. */ --bad:#f47b80; --bad-soft:rgba(242,100,106,.10); --bad-line:rgba(242,100,106,.26); --info:#60a5fa; --pur:#a78bfa; --wa:#25D366; /* ── El chat ── ⭐ Va aparte de los estados a propósito. Una burbuja verde no significa «bien»: significa «esto lo dijimos nosotros». Si viviera en --ok, el día que cambie el verde de «correcto» cambiaría media conversación. Verde apagado, no el de WhatsApp: es un CRM, no una imitación. */ --chat-mio:#14392c; /* lo que salió de aquí */ --chat-mio-txt:#05291d; /* texto oscuro sobre verde claro (botón Enviar) */ /* ── Escala tipográfica: 7 pasos y ni uno más ── */ --f0:11px; /* microetiqueta, va en mayúsculas con tracking */ --f1:12px; /* apoyo · era 11px, por debajo del piso de cualquier sistema serio */ --f2:12px; /* cuerpo secundario */ --f3:13px; /* cuerpo */ --f4:15px; /* título de tarjeta */ --f5:20px; /* título de pantalla */ --f6:28px; /* la cifra que importa */ /* ── Radios: tres ── */ --r1:8px; /* chips, campos, botones */ --r2:12px; /* tarjetas */ --r3:18px; /* lo que FLOTA encima de la pantalla: guía, ayuda, sugerencias. ⛔ El 18 ya se usaba en tres lugares distintos escrito a mano —`_guia.js`, `_ayuda.js` y `crm.html`— sin ser token de nada. Un número que se repite y no tiene nombre es un acuerdo que nadie firmó: el siguiente que abra una tarjeta escribe 16 o 20 y nadie lo nota hasta que se ven las dos juntas. */ --r3:18px; /* modales */ --rf:999px; /* píldoras */ /* ── Espacio: múltiplos de 4 ── */ --e1:4px; --e2:8px; --e3:12px; --e4:16px; --e5:20px; --e6:24px; --e7:32px; /* ⛔⛔ 19-ago-2026 · ESTAS 15 VARIABLES ESTUVIERON PERDIDAS EN PRODUCCIÓN. Al insertar el bloque `@media` de la escala de controles, se metió EN MEDIO de este `:root` y todo lo que venía debajo quedó suelto dentro del @media, fuera de cualquier selector. Ahí el navegador lo descarta sin avisar: no truena, no sale en la consola, simplemente dejan de existir. Medido: `--card`, `--txt`, `--mut`, `--line`, `--r` y 10 más devolvían vacío. Y ésos son los NOMBRES VIEJOS que usan todas las hojas ya escritas — cada `var(--card)` de 19 pantallas caía a nada. ⭐⭐ Es el modo de fallar más caro que tiene el CSS: silencioso. Por eso no se descubre leyendo el archivo, sino preguntándole al navegador si la variable resuelve. Si se vuelve a mover este bloque, comprobarlo así. */ /* ── Movimiento: rápido y con salida suave ── */ --ease:cubic-bezier(.2,.8,.25,1); --dur:.14s; /* ── Sombra: solo para lo que flota ── */ --sh:0 18px 50px -14px rgba(0,0,0,.75), 0 0 0 1px rgba(255,255,255,.055); --sh-sm:0 4px 14px -6px rgba(0,0,0,.6); /* ── Nombres viejos, apuntando a la escala nueva ── Así todas las hojas ya escritas heredan el sistema sin tocar su HTML. */ --bg:var(--s0); --surf:var(--s1); --card:var(--s2); --card2:var(--s3); --card3:var(--s4); --line:var(--l1); --line2:var(--l2); --txt:var(--t1); --mut:var(--t2); --dim:var(--t3); --r:var(--r2); /* ── LA ESCALA DE LOS CONTROLES ────────────────────────────────────── Medido antes de tocar nada: de 9 pantallas salieron 151 controles por debajo de 40px y 129 por debajo de 32 — 90 de ellos el mismo boton (.chip, 27px de alto y letra de 12). Un panel que se usa todo el dia no se maneja con botones de 27px: los sistemas serios (GitHub, Linear, Stripe) paran en 32. Y en telefono ninguno de esos se puede tocar sin equivocarse, que es justo de lo que se quejaron los clientes. Una sola escala aqui arriba mueve las 9 pantallas a la vez. */ --ctl:32px; /* filtros, etiquetas, botones de barra */ --ctl-mini:32px; /* los de icono: subir, bajar, quitar, editar */ --ctl-alto:36px; /* los de accion: guardar, publicar, mandar */ --fc:13px; /* la letra de los controles */ } /* ⛔⛔ EN TELEFONO LA MISMA ESCALA NO SIRVE, Y CADA HOJA LO ESTABA ARREGLANDO POR SU CUENTA: `proceso.html` tenia su regla de 44px y `inicio.html` otra, mientras `catalogo.html` se quedaba con botones de 20x21 que no se pueden tocar sin equivocarse. Tres arreglos distintos para el mismo problema es no tener arreglo. Aqui se mueve LA ESCALA, no los botones: como todos cuelgan de estas variables, con dedo grueso crecen los de las 19 hojas a la vez. 44px es el minimo que piden Apple y Google, y es el tamaño de la yema de un dedo — por debajo de eso no se falla por torpeza, se falla porque el boton es mas chico que el dedo. */ /* ⛔ Y va con las DOS condiciones, como el resto del archivo. Con solo `pointer:coarse` la regla es INCOMPROBABLE desde una computadora —un navegador de escritorio nunca la enciende, ni siquiera achicando la ventana—, asi que nadie puede ver si funciona hasta tener el telefono en la mano. Con `max-width` tambien entra al angostar, que es como se revisa. */ @media (pointer:coarse), (max-width:560px){ :root{ --ctl:44px; --ctl-alto:48px; --ctl-mini:44px; --fc:14px; } } *{box-sizing:border-box;margin:0} html{-webkit-text-size-adjust:100%} /* ⭐⭐ EL FONDO NO ES NEGRO MUERTO: TIENE ATMÓSFERA. Un `#0a0b0d` liso de pared a pared no es «elegante», es la ausencia de una decisión — y hace que todo lo que va encima parezca pegado sobre nada. Dos luces enormes y casi invisibles (una azul arriba a la izquierda, una de marca abajo a la derecha) le dan al fondo una profundidad que no se mira pero se siente. Van FIJAS: si se movieran con el scroll, la página parecería un papel tapiz. ⛔ Muy tenues a propósito, 5% y 3%. En cuanto se notan, cansan. */ body{ background:var(--s0); color:var(--t1); background-image: radial-gradient(ellipse 90% 55% at 12% -10%, color-mix(in srgb, var(--brand) 5%, transparent) 0%, transparent 70%), radial-gradient(ellipse 70% 50% at 95% 8%, color-mix(in srgb, var(--accion) 3%, transparent) 0%, transparent 65%); background-attachment:fixed; background-repeat:no-repeat; font-family:'Inter','SF Pro Text',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,Roboto,Arial,sans-serif; font-size:var(--f3); line-height:1.5; font-feature-settings:'cv05' 1,'ss01' 1,'tnum' 0; /* Ahora sí sirve: con Inter puesta, la letra se redibuja según su tamaño. */ font-optical-sizing:auto; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; /* ⛔⛔ `overflow-x:hidden` EN EL BODY MATA TODO `position:sticky`. No es un detalle: `hidden` convierte al body en CONTENEDOR DE SCROLL, y desde ese momento cualquier barra pegajosa se ancla al body en vez de a la pantalla. Como quien scrollea es el `html`, la barra nunca se queda: se va con el contenido como si fuera estática, y el CSS se ve perfecto. Se descubrió midiendo el teléfono: al abrir un correo y bajar 450 px se perdían el botón de volver y TODAS las acciones. Poner `position:sticky` no arreglaba nada y la regla parecía bien escrita. ⭐ `clip` recorta exactamente igual —nada se sale de lado— pero NO crea contenedor de scroll, así que el sticky vuelve a funcionar. Se dejan las dos: el navegador que no entienda `clip` se queda con `hidden`, que es como estaba. */ overflow-x:hidden; overflow-x:clip; } button,input,select,textarea{font-family:inherit} button{cursor:pointer;font-size:inherit;letter-spacing:inherit} a{color:inherit} /* Toda cifra se alinea en columna: es de lo que más “se ve caro”. */ b,strong,.num,td,th,input[type=number]{font-variant-numeric:tabular-nums} ::selection{background:var(--brand-soft);color:var(--t1)} ::-webkit-scrollbar{height:10px;width:10px} ::-webkit-scrollbar-thumb{background:rgba(255,255,255,.09);border-radius:var(--rf);border:3px solid transparent;background-clip:content-box} ::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.16);background-clip:content-box} ::-webkit-scrollbar-track{background:transparent} /* El foco se ve. No por accesibilidad nada más: un sistema sin foco visible se siente barato en cuanto alguien usa el teclado. */ :focus{outline:none} :focus-visible{outline:2px solid var(--accion);outline-offset:2px;border-radius:var(--r1)} @media (prefers-reduced-motion:reduce){ /* ⛔⛔ FALTABA `animation-iteration-count`, Y ESO CONVERTÍA LA REGLA EN LO CONTRARIO DE LO QUE PRETENDE. Con solo acortar la duración, una animación INFINITA no se detiene: se repite 100,000 veces por segundo. Hay ocho en el panel —los tres puntitos de «escribiendo», las ruedas de carga, el latido del aviso— y para quien pidió menos movimiento se volvían un parpadeo, que es justo lo que esta preferencia existe para evitar: no es una molestia estética, hay gente a la que le provoca mareo o algo peor. Con `iteration-count:1` corren una vez, terminan y se quedan quietas. ⭐ Y `scroll-behavior:auto`: el desplazamiento suave también es movimiento. Se usa en el CRM al recorrer conversaciones con j/k. */ *,*::before,*::after{ animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; scroll-behavior:auto!important} } /* ─────────────────────────── CHROME ─────────────────────────── */ /* ⛔⛔ MEDIDO EN PIXELES EL 21-AGO: la cabecera daba **1.03** contra el fondo de la pagina. O sea que la barra de arriba —la que sale en las 31 pantallas, la que lleva el nombre del negocio y la salida— no existia como objeto: era el mismo negro con unas letras encima y una raya al 5.5 %. Es lo primero que se ve al abrir el sistema. ⭐ Una barra de herramientas no es una tarjeta: no se levanta, se ASIENTA. Sube un peldaño de superficie para tener cuerpo, la raya de abajo pasa a `--l2` para cortar limpio contra lo que pase por debajo, y lleva su linea de luz arriba mas una sombra muy difusa hacia abajo — asi, cuando el contenido rueda por detras, se ve que la barra esta ENCIMA. ⛔ Sigue siendo translucida a proposito: el desenfoque de detras es lo que la hace sentir de cristal, y quitarlo la volveria un bloque pegado. */ /* ⛔⛔ TRES PANTALLAS NO TENIAN CABECERA. Medido el 21-ago: `habilidades`, `proceso` y `productos` no llevan la etiqueta `header` sino un `div class="hdr"` que se rellena desde el codigo — y **`.hdr` no tiene ni una linea de estilo en ningun archivo**. Resultado: el logo, el titulo, el nombre del negocio y «Salir» se apilan en vertical en la esquina de arriba a la izquierda, sin banda, sin raya y sin quedarse pegados al rodar. Todo el trabajo de la vuelta 5 sobre la barra nunca les llego. ⭐ Se cura con un selector, no con tres parches: la misma regla vale para las dos formas de escribir lo mismo. Y cualquier pantalla nueva que use `.hdr` nace ya con la barra de la casa. */ header, .hdr{ padding:0 var(--e5); min-height:56px; border-bottom:1px solid var(--l2); display:flex; align-items:center; gap:var(--e3); background:color-mix(in srgb, var(--s3) 90%, transparent); box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 10px 26px -20px rgba(0,0,0,1); backdrop-filter:saturate(160%) blur(16px); position:sticky; top:0; z-index:30; flex-wrap:wrap; } .logo{ width:30px;height:30px;border-radius:var(--r1);background:var(--brand); display:grid;place-items:center;font-weight:600;font-size:var(--f2);color:#fff;flex:none; letter-spacing:-.02em; box-shadow:inset 0 1px 0 rgba(255,255,255,.22); } .htit{font-size:var(--f3);font-weight:600;line-height:1.2;letter-spacing:-.012em} .hsub{font-size:var(--f1);color:var(--t3);letter-spacing:-.005em} .hsp{flex:1} /* ⭐ EL SECUNDARIO TAMBIÉN ES UN BOTÓN. Era transparente del todo: al lado del amarillo —que tiene relieve, brillo y sombra— no parecía un hermano menor, parecía texto subrayable. Recibe la misma luz de arriba que las tarjetas, pero mucho más floja: se nota que es de la familia y que manda el otro. */ .tool{ background:linear-gradient(180deg, rgba(255,255,255,.045) 0%, rgba(255,255,255,.012) 100%); border:1px solid var(--l2);color:var(--t2); padding:7px 13px;border-radius:var(--r1);font-size:var(--fc);font-weight:500; min-height:var(--ctl);box-sizing:border-box;justify-content:center; white-space:nowrap;text-decoration:none;display:inline-flex;align-items:center;gap:6px; box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 1px 2px rgba(0,0,0,.28); transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease), color var(--dur) var(--ease),transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease); } .tool:hover{background:var(--s3);border-color:var(--l3);color:var(--t1); box-shadow:inset 0 1px 0 rgba(255,255,255,.09), 0 4px 12px -6px rgba(0,0,0,.6)} /* Al pulsar SE HUNDE UN PIXEL y pierde la sombra. Es el único momento en que un botón debe parecer un campo: se está apretando. */ .tool:active{background:var(--s2);transform:translateY(1px); box-shadow:inset 0 1px 3px rgba(0,0,0,.45)} /* ═══ LA SALIDA DE UNA PANTALLA VACIA ═════════════════════════════════════ ⛔⛔ Cuando una pantalla no tiene nada que enseñar, lo que pone en su lugar —«Todavia no has prendido ninguna habilidad. **Prendelas primero →**»— es lo MAS IMPORTANTE que tiene: es el unico camino hacia adelante, y le sale justo al cliente NUEVO, que es el que menos sabe donde tocar. Y estaban escritas como enlaces de texto sueltos dentro del parrafo. Medido el 20-ago-2026 en «Tu proceso» a 360 px: «Prendelas primero →» · 119 × 15 px · NO SE PODIA TOCAR 15 px de alto —un tercio de lo que mide cualquier boton del panel— y ademas, al ser `display:inline`, **el renglon se parte en dos en el telefono y el centro del enlace cae en el hueco entre las dos lineas**: el toque no le llega a nadie. En Cerebro pasaba lo mismo con 18 px. ⭐ `.salida` lo vuelve un blanco de verdad sin volverlo un boton gordo: se mantiene el color de liga y la flecha, pero con alto de toque y sin partirse. ⛔ Es SOLO para la accion que saca de un vacio. Las ligas que viven dentro de un texto explicativo se quedan como estan: convertirlas en blancos de 44 px llenaria de bloques los parrafos. ⛔⛔ Y NO VALE CON `inline-flex`: se probo primero y **seguia sin poder tocarse**. Un elemento en linea de 44 px metido en un renglon de 22 se sale de su propia linea por arriba y por abajo, y **el parrafo de al lado se le pinta encima**; medido, el toque en el centro contestaba `P`, no el enlace. Va en su propio renglon, con el ancho de su texto. */ .salida{ display:flex;width:fit-content;align-items:center;gap:6px; min-height:44px;padding:0 2px;box-sizing:border-box; text-decoration:none;font-weight:600; } .salida:hover{text-decoration:underline} .btnp{ /* El botón principal, en el amarillo de la marca. Texto oscuro SIEMPRE: blanco sobre amarillo da 1.34 de contraste y no se lee. */ background:var(--accion);border:0;color:var(--accion-txt); padding:8px 16px;border-radius:var(--r1);font-size:var(--fc);font-weight:600; min-height:var(--ctl-alto);box-sizing:border-box; display:inline-flex;align-items:center;justify-content:center;gap:6px; white-space:nowrap;letter-spacing:-.005em; box-shadow:inset 0 1px 0 rgba(255,255,255,.45), 0 4px 14px -6px rgba(255,222,0,.38); transition:background var(--dur) var(--ease),transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease); } .btnp:hover{background:var(--accion-hi)} .btnp:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 6px 20px -6px rgba(255,222,0,.55)} .btnp:active{transform:translateY(1px)} .btng{ background:var(--s3);border:1px solid var(--l2);color:var(--t2); padding:8px 16px;border-radius:var(--r1);font-size:var(--fc);font-weight:500; min-height:var(--ctl-alto);box-sizing:border-box; display:inline-flex;align-items:center;justify-content:center;gap:6px; transition:background var(--dur) var(--ease),color var(--dur) var(--ease); } .btng:hover{background:var(--s4);color:var(--t1)} /* ⛔⛔ LAS FILAS QUE RUEDAN DE LADO NO DECIAN QUE HAY MAS. Medido el 21-ago en un telefono de 375: la fila de filtros del CRM esconde **595 px** —mas de ancho y medio de pantalla, con «Para hoy» y «Descartados» fuera de la vista— y la de herramientas **460 px**. Y su barra de scroll esta apagada a proposito (`scrollbar-width:none`), porque una barra gris debajo de unas pastillas se ve mal. O sea que se quito la unica señal y no se puso otra. ⭐⭐ EL DESVANECIDO DE BORDE, y aparece y desaparece SOLO, sin una linea de JavaScript. El truco son cuatro capas de fondo: · dos TAPAS pegadas al CONTENIDO (`local`), del color de la barra; · dos VELOS pegados a la CAJA (`scroll`), que difuminan el borde. Cuando estas al principio, la tapa izquierda viaja con el contenido y se queda justo encima del velo izquierdo, tapandolo; en cuanto ruedas, la tapa se va con el contenido y el velo asoma. El resultado: el borde se desvanece exactamente en el lado por donde queda algo, y solo mientras queda. ⛔ Va con `--s1` a los dos lados porque ese es el fondo de la barra: el desvanecido tiene que morir en el color de su propia barra, no en el de la pagina, o se veria un escalon. */ .bar{ display:flex;gap:6px;align-items:center;padding:10px var(--e5); border-bottom:1px solid var(--l1);flex-wrap:wrap; background-color:var(--s1); background-image: linear-gradient(to right, var(--s1), var(--s1)), linear-gradient(to left, var(--s1), var(--s1)), linear-gradient(to right, var(--s1), transparent), linear-gradient(to left, var(--s1), transparent); background-position:left center, right center, left center, right center; background-size:14px 100%, 14px 100%, 34px 100%, 34px 100%; background-repeat:no-repeat; background-attachment:local, local, scroll, scroll; } /* Los indicadores ruedan igual en el telefono —escondian 174 px— y llevan el mismo desvanecido, pero muriendo en el fondo de la pagina, que es donde viven ellos. */ .kpis{ background-image: linear-gradient(to right, var(--s0), var(--s0)), linear-gradient(to left, var(--s0), var(--s0)), linear-gradient(to right, var(--s0), transparent), linear-gradient(to left, var(--s0), transparent); background-position:left center, right center, left center, right center; background-size:12px 100%, 12px 100%, 30px 100%, 30px 100%; background-repeat:no-repeat; background-attachment:local, local, scroll, scroll; } .chip{ background:transparent;border:1px solid var(--l2);color:var(--t2); padding:6px 14px;border-radius:var(--rf);font-size:var(--fc);font-weight:500; min-height:var(--ctl);box-sizing:border-box; display:inline-flex;align-items:center;justify-content:center;gap:6px; transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease),color var(--dur) var(--ease); } .chip:hover{background:var(--s3);color:var(--t1);border-color:var(--l3)} /* ⭐ LA PESTAÑA ACTIVA TIENE QUE GANAR DE LEJOS. Antes se distinguía por un fondo apenas más azul: a un metro de la pantalla, las cuatro se veían igual y el dueño no sabía dónde estaba parado. El halo la separa del grupo sin subirle el tamaño ni gritar — se ve antes de leerla. */ .chip.on{ border-color:var(--brand-line); background:linear-gradient(180deg, rgba(255,255,255,.05) 0%, rgba(255,255,255,0) 55%), var(--brand-soft); color:var(--t1);font-weight:600; box-shadow:inset 0 1px 0 rgba(255,255,255,.09), 0 0 0 3px var(--brand-soft), 0 4px 14px -8px rgba(0,0,0,.8); } .barsp{flex:1} /* ═══ EL RENGLÓN NO PUEDE SER INFINITO ════════════════════════════════════ ⛔ MEDIDO el 19-ago en una pantalla de 1920: en `logistica` un párrafo de explicación llegaba a **239 letras por renglón**; en `facturacion` a 172, en `inicio` a 127. Lo cómodo de leer son 60–75. Pasado ese ancho el ojo pierde la línea al saltar de un renglón al siguiente: se vuelve a leer el mismo o se brinca uno. No es un detalle de gusto — es la diferencia entre que el dueño lea la explicación que le pusimos o la salte, y estas notas existen justamente para que las lea. ⭐ `ch` es el ancho de un «0» de la letra que esté puesta, así que el tope sigue midiendo lo mismo aunque cambie el tamaño. Va solo en el texto explicativo: las tablas, las listas y las tarjetas SÍ deben usar todo el ancho — ahí no se lee de corrido, se busca un dato. */ /* ═══ UNA FILA DE CAMPOS ═══════════════════════════════════════════════════ ⛔⛔ `.cfg` se usaba en SIETE lugares de `logistica.html` y **no estaba definida en ninguna parte** — ni ahí ni aquí. Una clase huérfana: el HTML la pedía y nadie la contestaba. Sin rejilla, cada `` toma su ancho POR DEFECTO —unos 147 px, que es lo que mide un campo de texto sin CSS— y dos seguidos **se salen del modal**. Medido en 375 px: un campo del pedido nuevo terminaba en 370 con el modal acabando en 352, o sea **18 px fuera**, pisando el margen. ⭐ Se define aquí y no en cada pantalla: `habilidades.html` ya tenía su propia versión con el mismo espíritu —fila que envuelve—, así que esto es el acuerdo que faltaba escribir. Las hojas que ya la definen siguen mandando sobre la suya; ésta solo cubre a las que no. ⛔ `min-width:0` en las columnas: sin eso una columna flex NO se encoge por debajo del ancho de su contenido, y vuelve el desborde por otra puerta. */ .cfg{display:flex;flex-wrap:wrap;gap:var(--e3);align-items:flex-end} .cfg > div{flex:1 1 150px;min-width:0} .cfg input, .cfg select, .cfg textarea{width:100%; min-width:0} /* ⛔⛔ EL CAMPO DE HORA TIENE ANCHO PROPIO Y NO SE DEJA ENCOGER. Medido en 375 px: los dos campos de la franja de entrega (`nDesde`/`nHasta`) viven en una fila de 271 px, y un `` **no baja de unos 139 px** por su contenido interno (las horas, los minutos y las flechas). 139 × 2 = 278, que no cabe en 271 — así que el segundo terminaba en 370 con el modal acabando en 352: **18 px fuera**, cortado por el borde. `min-width:0` arriba no basta con estos: el ancho no viene del CSS sino del propio control. ⭐ Lo que sí funciona es dejar que la fila ENVUELVA, y así el segundo campo cae debajo completo en vez de salirse. Solo en pantalla chica: en escritorio los dos caben de sobra al lado. */ @media (pointer:coarse), (max-width:560px){ .cfg > div{flex-basis:100%} } .nota, .hint, .sub{max-width:76ch} /* Los mismos 76ch para el texto explicativo que NO usa esas tres clases. Medido en 1920 antes de poner esto: cerebro .casQ .casP 256 letras ← el peor de todo el panel logistica .i > span 239 facturac. .i > span 172 inicio .h1s 127 conectar .arregla 109 productos .intro 101 cerebro-editar .bq .cq 96–98 ⭐ `.i > span` es el patrón de la columna de información de una fila (`.prow`): ahí el `` va sin clase, y por eso se escapaba del molde. Se toma el patrón, no el nombre, para que las filas nuevas nazcan bien. ⛔ Va solo al texto que se lee DE CORRIDO. Una tabla o una tarjeta sí deben usar todo el ancho: ahí no se lee, se busca un dato. */ .casQ, .casP, .intro, .arregla, .bq, .cq, .i > span{max-width:76ch} /* El subtítulo de una portada va centrado, así que el tope también: sin el `margin-inline:auto` se quedaría pegado a la izquierda debajo de un título que sí está al centro, y se vería desalineado. */ .h1s{max-width:76ch;margin-inline:auto} .nota{font-size:var(--f1);color:var(--t3)} /* ─────────────────────────── INDICADORES ─────────────────────────── */ .kpis{display:flex;gap:6px;align-items:center;flex-wrap:wrap;padding:var(--e3) var(--e5) 0} /* Los indicadores son lo PRIMERO que se mira al abrir, y son cinco cifras que compiten entre sí. El mismo canto iluminado de la tarjeta los convierte en piezas sólidas en vez de recuadros; al pasar el ratón se levantan un pelo, que es como se avisa «esto es una cosa, no un adorno» sin escribirlo. */ .kpi{ background: linear-gradient(180deg, rgba(255,255,255,.035) 0%, rgba(255,255,255,0) 60%), var(--s2); border:1px solid var(--l1);border-radius:var(--r1); height:32px;flex:none;display:flex;align-items:center;gap:7px;padding:0 12px; box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 1px 2px rgba(0,0,0,.3); transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease), transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease); } .kpi:hover{background:var(--s3);border-color:var(--l2);transform:translateY(-1px); box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 6px 16px -8px rgba(0,0,0,.7)} .kpi b{font-size:var(--f4);font-weight:600;letter-spacing:-.03em;font-variant-numeric:tabular-nums} .kpi span{font-size:var(--f1);color:var(--t3);white-space:nowrap;letter-spacing:-.005em} .kpi.ok b{color:var(--ok)} .kpi.warn b{color:var(--warn)} .kpi.bad b{color:var(--bad)} .kpi.acc b{color:var(--brand-hi)} /* ─────────────────────────── SUPERFICIES ─────────────────────────── */ .wrap{padding:var(--e4) var(--e5) 48px;max-width:1400px;margin-inline:auto} /* Escotilla para lo que de verdad quiere todo el ancho —un mapa, un tablero de columnas—: se le pone la clase y recupera el monitor entero. */ .wrap.ancho{max-width:none} .grid{display:grid;gap:var(--e3)} /* ⭐⭐ LA TARJETA TIENE MATERIA, NO SOLO COLOR. Era fondo plano + línea de pelo: la superficie más grande de la pantalla y la única sin ninguna cualidad física. En un tema oscuro eso se lee como «hueco recortado», no como «objeto encima de una mesa», y es la diferencia entre un panel correcto y uno que parece caro. Tres capas, y cada una hace un trabajo distinto: · el DEGRADADO da dirección — la luz viene de arriba, como en el mundo; · el `inset` de arriba es el CANTO iluminado, el filo que devuelve el brillo; · la sombra exterior la despega del fondo y crea el piso. Ninguna se nota por separado. Juntas, la tarjeta deja de ser un agujero. */ .caja{ background: linear-gradient(180deg, rgba(255,255,255,.028) 0%, rgba(255,255,255,0) 38%), var(--s2); border:1px solid var(--l1);border-radius:var(--r2); padding:var(--e5); box-shadow: inset 0 1px 0 rgba(255,255,255,.055), 0 1px 2px rgba(0,0,0,.35), 0 12px 32px -18px rgba(0,0,0,.85); transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease); } .caja h2{font-size:var(--f4);font-weight:600;letter-spacing:-.016em;margin-bottom:3px} /* ⭐ EL RENGLÓN TIENE UN LARGO CÓMODO, Y NO ES «todo el monitor». En escritorio estas explicaciones cruzaban 1,400 px: unos 180 caracteres por renglón. El ojo salta de línea perdiendo el sitio y el dueño deja de leer justo lo que le explica cómo funciona su herramienta. 72ch lo deja en el ancho de un párrafo de libro. En teléfono no cambia nada: ahí manda el 100%. */ .caja .sub{font-size:var(--f2);color:var(--t3);margin-bottom:var(--e4);line-height:1.55;letter-spacing:-.004em;max-width:58ch} .tit{ font-size:var(--f0);color:var(--t3);text-transform:uppercase; letter-spacing:.09em;font-weight:600;margin-bottom:var(--e2); } /* ─────────────────────────── TABLAS ─────────────────────────── */ table.t{width:100%;border-collapse:collapse;font-size:var(--f2)} table.t th{ font-size:var(--f0);letter-spacing:.07em;text-transform:uppercase;color:var(--t3); text-align:left;padding:0 10px 9px;font-weight:600; } table.t td{padding:10px;border-top:1px solid var(--l1);letter-spacing:-.004em} table.t td.r,table.t th.r{text-align:right} table.t tbody tr{transition:background var(--dur) var(--ease)} table.t tbody tr:hover td{background:var(--s3)} .pill{ font-size:var(--f0);font-weight:600;padding:3px 9px;border-radius:var(--rf); white-space:nowrap;display:inline-block;letter-spacing:.01em; } .pill.ok{background:var(--ok-soft);color:var(--ok);border:1px solid var(--ok-line)} .pill.warn{background:var(--warn-soft);color:var(--warn);border:1px solid var(--warn-line)} .pill.bad{background:var(--bad-soft);color:var(--bad);border:1px solid var(--bad-line)} .pill.info{background:var(--brand-soft);color:var(--brand-hi);border:1px solid var(--brand-line)} .pill.dim{background:var(--s3);color:var(--t2);border:1px solid var(--l2)} /* ─────────────────────────── CAMPOS ─────────────────────────── */ /* ⛔ Faltaba `time`: un campo de hora salía sin estilo, blanco y ancho, en medio de un formulario oscuro. Los selectores por tipo se olvidan de los tipos nuevos y no avisan. */ /* ⭐⭐ EL CAMPO SE HUNDE; TODO LO DEMÁS SE LEVANTA. Las tarjetas y los botones reciben luz de arriba. Un campo es lo contrario: es un hueco donde se ESCRIBE, y el ojo lo entiende sin que nadie se lo explique si la sombra va por dentro y en el borde de arriba. Con esa sola inversión el formulario deja de ser una lista de rectángulos y pasa a tener dos clases de cosa: las que sobresalen y las que se meten. */ input[type=text],input[type=number],input[type=date],input[type=time],input[type=email],select,textarea{ background:var(--s3);border:1px solid var(--l2);color:var(--t1); border-radius:var(--r1);padding:8px 11px;font-size:var(--f2); outline:none;width:100%;letter-spacing:-.004em; box-shadow:inset 0 1px 2px rgba(0,0,0,.35); transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } input::placeholder,textarea::placeholder{color:var(--t3)} input:hover,select:hover,textarea:hover{border-color:var(--l3)} /* ⛔ ANTES EL FOCO SOLO CAMBIABA EL COLOR DEL BORDE, y un borde de 1px que pasa de gris a azul es casi invisible en un formulario de siete casillas: quien teclea pierde de vista dónde está escribiendo. El halo se ve desde el otro lado de la mesa y no mueve ni un pixel el resto del formulario —crece hacia afuera con `box-shadow`, no con borde, que empujaría todo. */ input:focus,select:focus,textarea:focus{ border-color:var(--brand);background:var(--s2); box-shadow:inset 0 1px 2px rgba(0,0,0,.25), 0 0 0 3px var(--brand-soft); } label.f{font-size:var(--f0);color:var(--t3);display:block;margin-bottom:5px;letter-spacing:.02em;font-weight:500} /* ─────────────────────────── MODALES ─────────────────────────── */ .mod{ position:fixed;inset:0;background:rgba(5,6,8,.72);backdrop-filter:blur(6px); /* ⛔ 84 y no 60: TIENE que quedar POR ENCIMA del velo de la guía (80). Con 60 el modal salía oscurecido debajo del velo y la guía no podía señalar nada de adentro — se atoraba justo al abrirlo. */ display:none;align-items:center;justify-content:center;z-index:84;padding:var(--e5); } .mod.on{display:flex;animation:velo .18s var(--ease)} @keyframes velo{from{opacity:0}to{opacity:1}} /* ⛔⛔ MEDIDO EN PIXELES EL 21-AGO: la caja de una ventana daba **1.12** de contraste contra su propio velo. Una tarjeta puede vivir con poco porque tiene vecinas que la enmarcan; una ventana NO: tapa la pantalla entera y es lo unico que hay que mirar, asi que si no se despega del velo lo que se ve es un recuadro flotando en una nube gris. Un dialogo necesita ~1.5 o mas. ⭐ Sube al mismo material que ya usan las tarjetas —`--s4`— con un peldaño mas de luz encima, que da ~1.6 contra el velo. El canto pasa a `--l3`: el borde de un dialogo tiene que ser mas franco que el de una tarjeta. ⭐ Y el aro de 1 px por fuera lo separa del velo pase lo que pase detras; la sombra sola no basta, porque negro sobre negro no se ve. */ .modc{ background:linear-gradient(180deg, color-mix(in srgb,#fff 7%,var(--s4)) 0%, color-mix(in srgb,#fff 3%,var(--s4)) 100%); border:1px solid var(--l3);border-radius:var(--r3); width:min(560px,100%);overflow-y:auto;padding:var(--e6); max-height:86vh; /* respaldo para navegadores viejos */ max-height:86dvh; /* lo que de verdad se ve, sin las barras */ box-shadow:inset 0 1px 0 rgba(255,255,255,.10), 0 0 0 1px rgba(255,255,255,.05), 0 28px 64px -22px rgba(0,0,0,.95); animation:sube .22s var(--ease); } @keyframes sube{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}} /* ⛔⛔ EN UNA VENTANA LARGA, «GUARDAR» SE IBA CON EL DESPLAZAMIENTO. La de datos fiscales mide más de lo que cabe en pantalla —razón social, RFC, régimen, CP, serie, folio, correo, clave del SAT, IVA, la llave del facturador, el portal y las claves por producto—. Quien llegaba al final de un formulario así tenía que desplazarse otra vez hacia abajo buscando el botón, y el título de arriba ya se había perdido: a media ventana uno no sabe ni en cuál está. ⭐⭐ La cabecera y el pie se quedan quietos y solo se desplaza lo de en medio. Es la forma de un diálogo de escritorio de verdad, y en el teléfono es la diferencia entre poder guardar y no encontrar cómo. ⭐ Los dos sangran hasta el borde con márgenes negativos, para que el fondo tape lo que pasa por debajo en vez de dejar una franja del contenido asomando por los lados. */ .modc h3{ position:sticky;top:calc(var(--e6) * -1);z-index:2; margin:calc(var(--e6) * -1) calc(var(--e6) * -1) 5px; padding:var(--e6) var(--e6) 9px; background:linear-gradient(180deg, color-mix(in srgb,#fff 7%,var(--s4)) 0%, color-mix(in srgb,#fff 7%,var(--s4)) 72%, transparent 100%); font-size:var(--f4);font-weight:600;letter-spacing:-.016em; } .hint{font-size:var(--f2);color:var(--t3);margin-bottom:var(--e4);line-height:1.55;letter-spacing:-.004em} .modc h3{font-size:var(--f4);font-weight:600;letter-spacing:-.016em;margin-bottom:5px} .hint{font-size:var(--f2);color:var(--t3);margin-bottom:var(--e4);line-height:1.55;letter-spacing:-.004em} .modf{display:flex;gap:8px;justify-content:flex-end;margin-top:var(--e5);flex-wrap:wrap} /* ═══ EL PIE DEL MODAL SE QUEDA PEGADO ABAJO ══════════════════════════════ ⛔ MEDIDO el 19-ago en un teléfono de 375×667: el formulario de «Entrenar» del CRM mide **1227 px de contenido dentro de una ventana de 572**. El pie rodaba con el resto, así que para llegar a «Guardar» había que bajar por todo el formulario — y en `modNuevo` de logística y `modArchivos` pasaba lo mismo. No estaba ROTO: con scroll se llegaba. Pero un botón de guardar que hay que ir a buscar es un formulario que se abandona a la mitad, y ése es justo el momento en que el cliente decide que «no funciona en el teléfono». ⭐ Se pega SOLO donde estorba —en pantalla chica—: en escritorio el modal cabe entero y un pie pegado ahí solo robaría alto. Y va con las dos puertas, igual que el resto del archivo (ver la nota del tamaño de toque). `position:sticky` y no `fixed`: sticky se queda dentro de la caja que rueda y respeta el radio y el borde del modal; `fixed` se saldría a la pantalla y se montaría encima de otras cosas. */ /* ⛔⛔ Y SE QUITÓ DE LA MEDIA QUERY EL 20-ago-2026, porque el argumento de arriba —«en escritorio el modal cabe entero»— dejó de ser cierto el día que la tarjeta de «✨ Acomódame esto» empezó a crecer dentro de la ventana. Medido a 1280×800 con la ventana de redactar un correo: al abrirse la propuesta la ventana pasó de 541 a 688 px y **el pie se fue a 752, fuera de su propia caja, con «Enviar» dentro**. Tocarlo devolvía el velo del modal, no el botón. ⭐ Y no cuesta nada donde no hace falta: `sticky` **no roba alto**. Si el contenido cabe, la regla no hace absolutamente nada; solo actúa cuando el botón se iba a ir de la vista, que es justo cuando se le necesita. */ .modf{ /* ⛔⛔ `bottom:0` NO BASTA CUANDO HAY MARGEN NEGATIVO ABAJO. El pie se estira con `margin-bottom:-e6` para tapar de orilla a orilla; eso lo corre e6 hacia abajo, y `sticky` lo pega a UN BORDE QUE YA NO ES EL QUE SE VE. Resultado: una ranura de e6 por debajo del pie por la que se asomaba el contenido que iba rodando — en el anuncio se veía la vista previa saliéndose de la ventana, cortada a media tarjeta blanca. Se compensa exactamente lo que el margen corrió. Encontrado mirando la foto, no leyendo la regla: en el código las dos líneas se ven bien. */ position:sticky; bottom:calc(var(--e6) * -1); z-index:2; /* ⛔ DECÍA `--s2` Y LA VENTANA YA VA EN `--s4`. El pie se veía como una banda más oscura pegada abajo —una costura— y el contenido que rodaba se cortaba en seco contra ella. Tiene que ser EL MISMO tono de la ventana, no un tono cualquiera que un día lo fue. ⭐ Y encima lleva un desvanecido: el texto que pasa por debajo se disuelve en vez de quedar rebanado a media letra. Es la diferencia entre «aquí se acaba la caja» y «aquí hay más, sigue bajando». */ background:var(--s4); background-image:linear-gradient(180deg, transparent 0%, var(--s4) 18px); /* Se estira hasta los bordes para tapar de orilla a orilla, cancelando el relleno del contenedor —si no, quedan dos ranuras por donde se asoma el contenido que va pasando—. */ margin:var(--e4) calc(var(--e6) * -1) calc(var(--e6) * -1); padding:var(--e3) var(--e6) var(--e4); border-top:1px solid var(--l1); } @media (pointer:coarse), (max-width:560px){ /* Y los botones ocupan el ancho: con el pulgar, un botón ancho no se falla. El principal va a la DERECHA porque es donde cae el pulgar en una mano. */ .modf .btnp, .modf .btng{ flex:1 1 auto; justify-content:center } } /* ─────────────────────────── VARIOS ─────────────────────────── */ .demo{ position:fixed;left:50%;transform:translateX(-50%);bottom:14px; background:color-mix(in srgb, var(--s2) 92%, transparent);border:1px solid var(--l2); border-radius:var(--rf);padding:6px 15px;font-size:var(--f1);color:var(--t3); z-index:40;backdrop-filter:blur(10px);box-shadow:var(--sh-sm);letter-spacing:-.004em; } .vacio{font-size:var(--f2);color:var(--t3);padding:var(--e5);text-align:center;letter-spacing:-.004em} /* La entrada de cada pantalla: un fundido de 200 ms. Suficiente para que se sienta cuidado, no tanto como para estorbar a quien trabaja aquí todo el día. */ @keyframes entra{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}} .wrap,.tres,.dos,.cols{animation:entra .2s var(--ease)} /* ═══════════════════════════════════════════════════════════════════════ MOVIMIENTO Dos reglas: nada se mueve más de lo que tarda un parpadeo, y nada se mueve sin motivo. La entrada escalonada no es adorno — le dice al ojo en qué orden leer, y tapa el instante feo en que las fichas aparecen de golpe cuando el servidor contesta. ⛔ Todo esto se apaga solo si el sistema pide menos movimiento: la regla `prefers-reduced-motion` de arriba manda sobre esto. ═══════════════════════════════════════════════════════════════════════ */ @keyframes rivo-sube{ from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none} } @keyframes rivo-late{ 0%,100%{opacity:.35} 50%{opacity:.7} } /* Se le pone al contenedor; las hijas entran una tras otra. */ /* ⛔⛔ AQUÍ SE MORÍA EL «SE MUEVE AL TOCARLO» DE TODO EL PANEL, y llevaba semanas puesto sin que nadie lo notara. Estaba `both`, que es `backwards` + `forwards`. El `forwards` deja clavado el ÚLTIMO fotograma para siempre, y un valor puesto por una animación le gana a cualquier regla normal del CSS. El último fotograma dice `transform:none`, así que anulaba el `transform:translateY(-2px)` del `:hover` — en las fichas del cliente, en las de Rivo y en las de la lista de clientes. Estaba escrito en las tres, estaba publicado, y no había funcionado nunca. Medido con `getComputedStyle`: al pasar por encima cambiaban el borde y la sombra, y el `transform` se quedaba en la identidad. ⭐ `backwards` es lo que hacía falta desde el principio: aguanta el PRIMER fotograma durante el retardo escalonado —para que la ficha no parpadee antes de entrar— y al acabar suelta el control. Que es justo lo que queremos: la entrada es de una vez, el hover es para siempre. */ .entra > *{ animation:rivo-sube .34s var(--ease) backwards; } .entra > *:nth-child(1){animation-delay:.00s} .entra > *:nth-child(2){animation-delay:.03s} .entra > *:nth-child(3){animation-delay:.06s} .entra > *:nth-child(4){animation-delay:.09s} .entra > *:nth-child(5){animation-delay:.12s} .entra > *:nth-child(6){animation-delay:.15s} .entra > *:nth-child(7){animation-delay:.18s} .entra > *:nth-child(8){animation-delay:.21s} .entra > *:nth-child(n+9){animation-delay:.24s} /* El esqueleto: la forma de lo que viene, en vez de un texto que dice «cargando». ⭐ Que tenga la MISMA forma importa: así la pantalla no salta cuando llegan los datos. */ .hueso{ /* ⛔ La primera versión usaba s2→s3, que sobre el fondo casi no se veía: se leía como una pantalla vacía, no como una que está cargando. Un esqueleto invisible no sirve para nada. Se sube un peldaño y se le pasa un brillo por encima, que es lo que de verdad dice «esto se está trayendo». */ background:linear-gradient(90deg,var(--s3) 0%,var(--s4) 40%,var(--s3) 80%); background-size:200% 100%; border-radius:var(--r2); animation:rivo-brillo 1.5s linear infinite; } @keyframes rivo-brillo{ from{background-position:120% 0} to{background-position:-40% 0} } /* ═══════════════════════════════════════════════════════════════════════ ICONOS Heredan el color del texto (`currentColor`), y ahí está la ganancia real frente a los emojis: una ficha apagada apaga su icono sola, sin filtros de escala de grises ni una segunda imagen. El color lo decide el contexto. ═══════════════════════════════════════════════════════════════════════ */ /* ⛔ El tamaño salía de `font-size`, así que para agrandar un icono había que escribir `font-size:22px` — y eso metía 19px y 22px en la escala tipográfica, que tiene 7 pasos y ninguno es ésos. Un icono no es texto: se mide aparte. */ .ico-svg{width:1em;height:1em;display:block;flex:none;vertical-align:-.125em} .ic > .ico-svg{width:22px;height:22px} /* ═══════════════════════════════════════════════════════════════════════ FONDO CON PROFUNDIDAD El fondo era negro plano. Sobre plano, una tarjeta oscura no se despega: parece un rectángulo pintado, no algo que está encima. Dos luces muy tenues arriba dan una dirección de luz, y con eso las superficies de la escalera empiezan a leerse como pisos. ⭐ Son `radial-gradient` fijos, no imágenes: cero peso, cero peticiones. ═══════════════════════════════════════════════════════════════════════ */ body.hondo{ background: radial-gradient(900px 480px at 18% -8%, rgba(59,130,246,.10), transparent 62%), radial-gradient(760px 420px at 88% 4%, rgba(167,139,250,.07), transparent 60%), var(--s0); background-attachment:fixed; } /* ═══════════════════════════════════════════════════════════════════════ BLANCOS PARA EL DEDO Con ratón, un botón de 26px de alto está bien y se ve fino. Con el dedo es un blanco chico: la recomendación de Apple y de Google es 44px, y no es capricho — es el ancho promedio de la yema. ⭐ Por eso va en `pointer:coarse` y no siempre: agrandar todo para todos engorda la pantalla de quien no lo necesita. El navegador ya sabe si te estás apuntando con un dedo o con una flecha. ⛔⛔ 19-ago-2026 · PERO NO SIEMPRE LO SABE, Y AHÍ SE CAÍA TODO. Medido en producción, en una ventana de 375 px —o sea, un teléfono—: pointer:coarse → false max-width:560px → true .btnp (el botón principal de TODO el panel) → 29 px de alto Con `coarse` en falso, NADA de este bloque aplicaba: el panel entero se pintaba a tamaño de escritorio dentro de un teléfono, con los botones a 27–30 px cuando el mínimo para un dedo es 44. Y no es un caso raro de laboratorio: los navegadores EMBEBIDOS —el de WhatsApp, el de Instagram, el de Facebook— muchas veces no reportan `coarse`, y ésa es justamente la puerta por la que el cliente abre la liga que le mandamos. Era el caso MÁS común, no el menos. ⭐⭐ La regla de verdad: **un teléfono es ANGOSTO, con o sin `coarse`.** Se agrega el ancho como segunda puerta (la coma es «o»). Así el dedo manda cuando el navegador lo dice Y cuando no lo dice pero la pantalla lo grita. ⛔ NO quitar la segunda condición: sin ella vuelve el panel de 29 px. ═══════════════════════════════════════════════════════════════════════ */ @media (pointer:coarse), (max-width:560px){ button, .tool,.btnp,.btng,.chip, a.bloque{ min-height:44px; } /* Los de dentro de una ficha llevan además aire a los lados: un botón alto y angosto se sigue fallando. */ .bmej,.bcon{ min-height:44px; padding-left:16px; padding-right:16px; } } /* ═══════════════════════════════════════════════════════════════════════ EL PASO ENTRE PANTALLAS Ir de «entrar» a «inicio», o de «inicio» a un panel, era un corte seco: la pantalla desaparece y aparece otra. Se siente a recarga, no a producto. `@view-transition` es del navegador — no hay librería, no hay JavaScript, no pesa nada. Donde no exista, no pasa nada: el corte seco de siempre. Por eso no hace falta comprobar el navegador ni cargar un respaldo. ═══════════════════════════════════════════════════════════════════════ */ @view-transition{ navigation:auto } ::view-transition-old(root){ animation:rivo-sale .16s var(--ease) both } ::view-transition-new(root){ animation:rivo-entra .26s var(--ease) both } @keyframes rivo-sale{ to{opacity:0} } @keyframes rivo-entra{ from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:none} } @media (prefers-reduced-motion:reduce){ ::view-transition-old(root),::view-transition-new(root){ animation:none } } /* ═══════════════════════════════════════════════════════════════════════ BLANCOS DE TOQUE Se medían 7 controles por debajo de 44 px. La respuesta fácil sería engordarlos en todas partes — y estaría mal: 44 px es la medida de un DEDO, no de un puntero de ratón. Un botón de 44 px en escritorio se ve inflado y come el aire que sostiene la jerarquía. `pointer:coarse` es la pregunta correcta: no «¿la pantalla es chica?» sino «¿con qué está tocando esta persona?». Un teléfono en horizontal sigue siendo un dedo; una pantalla táctil de 27" también. ═══════════════════════════════════════════════════════════════════════ */ @media (pointer:coarse), (max-width:560px){ button, a.tool, a.btnp, .chip, .bmej, .bcon, [role="button"], input, select{ min-height:44px; } button, .chip, .bmej, .bcon{ padding-inline:14px } /* Los que son cuadrados —los flotantes, los iconos— crecen por los dos lados */ .ayBtn, #sgBtn{ width:52px;height:52px } } /* ═══════════════════════════════════════════════════════════════════════ LA CABECERA Es la pieza más vista del sistema —sale en las 19 pantallas— y era la menos trabajada: la marca pegada al texto, dos renglones apretados y 56 px de alto que no alcanzaban para respirar. ⭐ El cambio que más se nota no es el tamaño: es el AIRE entre la marca y el texto, y que el nombre del negocio deje de competir con el de la pantalla. Uno dice DÓNDE estás; el otro, DE QUIÉN es. ═══════════════════════════════════════════════════════════════════════ */ /* ⛔ 64 px de cabecera + 56 de barra eran 120 px —el 17% de la pantalla— gastados antes de la primera conversación. Se bajan a 50: sigue cabiendo todo, y son 14 px que vuelven al contenido en TODAS las pantallas. */ header{ min-height:50px; padding-inline:var(--e5); gap:var(--e4) } header .logo, .hdr .logo{ width:30px;height:30px;border-radius:var(--r1);font-size:var(--f2) } .htit{ font-size:var(--f4);font-weight:650;letter-spacing:-.018em;line-height:1.15 } /* El nombre del negocio sube de --t3 (lo que casi no importa) a --t2: es la identidad de quien está usando el sistema, no una nota al pie. */ .hsub{ font-size:var(--f2);color:var(--t2);letter-spacing:-.004em;margin-top:1px;font-weight:450 } /* ═══════════════════════════════════════════════════════════════════════ BOTÓN TRABAJANDO Entre que alguien pica un botón y algo ocurre pasa tiempo — irse a Google son segundos en un teléfono con red lenta. En ese hueco el botón se veía idéntico a antes del clic, y la reacción natural es picarle otra vez. ⭐ Lo importante no es la ruedita: es que el botón deje de aceptar clics. La señal visual evita la duda; `pointer-events:none` evita el doble envío. ═══════════════════════════════════════════════════════════════════════ */ @keyframes rivo-gira{ to{ transform:rotate(360deg) } } .trabajando{ pointer-events:none; position:relative; color:transparent!important; } .trabajando::after{ content:''; position:absolute; inset:0; margin:auto; width:16px; height:16px; border:2px solid currentColor; border-top-color:transparent; border-radius:50%; color:var(--accion-txt); animation:rivo-gira .7s linear infinite; } /* En los que no llevan fondo de marca, la ruedita va del color del texto. */ .tool.trabajando::after, .btng.trabajando::after, .goog.trabajando::after{ color:var(--t2) } @media (prefers-reduced-motion:reduce){ .trabajando::after{ animation:none; border-top-color:currentColor; opacity:.5 } } /* ═══ BARRA DE «ESTÁS VIENDO A UN CLIENTE» ════════════════════════════════ La pone sola `_rivo.js` en cualquier pantalla, sólo para Rivo y sólo mientras mira el panel de otro. Dos trabajos: 1 · La salida. Entrar a un cliente era un callejón sin salida. 2 · El recordatorio. Un panel de cliente se ve idéntico al propio; sin este aviso es cuestión de tiempo cambiar un precio en el negocio equivocado. Por eso lleva el amarillo de la marca de canto: se nota sin gritar. Alto FIJO de 38px porque el encabezado pegajoso se recorre justo ese tanto. */ .viendo{ position:sticky; top:0; z-index:40; height:38px; display:flex; align-items:center; gap:var(--e3); padding-inline:var(--e5); background:color-mix(in srgb,var(--accion) 12%,var(--s1)); border-bottom:1px solid color-mix(in srgb,var(--accion) 26%,var(--l1)); box-shadow:inset 0 2px 0 var(--accion); font-size:var(--f1); color:var(--t2); white-space:nowrap; } .viendo .vpt{width:7px;height:7px;border-radius:50%;background:var(--accion);flex:none; box-shadow:0 0 0 3px color-mix(in srgb,var(--accion) 22%,transparent)} .viendo .vtx{overflow:hidden;text-overflow:ellipsis} .viendo .vtx b{color:var(--t0);font-weight:650} .viendo .vsp{flex:1} .viendo .vbt{ border:1px solid var(--l2); background:transparent; color:var(--t1); border-radius:var(--r1); padding:5px 11px; font:inherit; font-weight:600; cursor:pointer; transition:background var(--vel) var(--curva), color var(--vel) var(--curva); } .viendo .vbt:hover{background:var(--s3); color:var(--t0)} .viendo .vbt2{background:var(--accion); color:var(--accion-txt); border-color:transparent} .viendo .vbt2:hover{filter:brightness(1.07); background:var(--accion)} /* El encabezado también se pega arriba: sin esto se montaría sobre la barra. */ body.con-viendo header{ top:38px } /* En teléfono no cabe la frase entera; lo que no puede faltar es la salida. */ @media (max-width:560px){ .viendo{padding-inline:var(--e4); gap:var(--e2)} .viendo .vtx{font-size:var(--f0)} .viendo .vbt{padding:5px 9px} } @media (pointer:coarse), (max-width:560px){ .viendo .vbt{min-height:30px} } /* ═══ EL FOCO EN LAS FICHAS ═══════════════════════════════════════════════ Las fichas son
con `tabindex`, no botones, así que el navegador no les pone nada. Sin esto, quien navegue con Tab llega a la ficha y NO VE dónde está: peor que no poder llegar, porque parece que no pasó nada. `:focus-visible` y no `:focus`: con el ratón no sale, sólo con teclado. */ .p:focus-visible,.htar:focus-visible,.ctar:focus-visible, [role="button"][tabindex]:focus-visible{ outline:2px solid var(--brand); outline-offset:3px; border-radius:var(--r2); } .p[tabindex],.htar[tabindex],.ctar[tabindex]{ cursor:pointer } /* ⛔ La «?» blanca sobre el azul de marca da 3.52 de contraste y el mínimo es 4.5. Se oscurece el azul SOLO en este botón —no la marca entera— hasta que la letra se lea. `button.ayBtn` y no `.ayBtn` porque el estilo original lo inyecta `_ayuda.js` después de esta hoja: hace falta pesar más. */ button.ayBtn{ background:color-mix(in srgb, var(--brand) 74%, #070a12); font-weight:700; } button.ayBtn:hover{ background:color-mix(in srgb, var(--brand) 88%, #070a12) } /* ═══ EL APRETÓN ══════════════════════════════════════════════════════════ En un teléfono no hay «pasar por encima»: entre que tocas y que cambia la pantalla no pasaba absolutamente nada, y medio segundo sin respuesta se siente como que no registró el toque — así es como la gente toca dos veces. Se hunde un pelo. No es adorno: es el acuse de recibo. */ .p:active,.htar:active,.ctar:active{ transform:translateY(0) scale(.988); transition-duration:.06s; } /* Los botones de dentro también, y ganan a la ficha porque son lo que se tocó. */ .bmej:active,.bcon:active,.btnp:active,.tool:active,.viendo .vbt:active{ transform:scale(.97); transition-duration:.06s; } /* A quien pide menos movimiento no se le mueve nada. */ @media (prefers-reduced-motion:reduce){ .entra > *{animation:none} .p:active,.htar:active,.ctar:active, .bmej:active,.bcon:active,.btnp:active,.tool:active{transform:none} } /* El botón de salir de la cabecera. Discreto a propósito: es una salida, no una acción que queramos empujar — pero se ve siempre y no se esconde en pantalla angosta, que es justo donde más falta hace. */ .hsalir{ flex:none; margin-left:2px } @media (max-width:560px){ .hsalir{ padding-inline:11px } } .hsalir[disabled]{ opacity:.6; cursor:default } /* ⛔⛔ EL ZOOM QUE DESCUADRA LA PANTALLA EN CADA CAMPO. Safari en iPhone hace zoom automáticamente en cuanto se toca un campo cuya letra mide **menos de 16 px** — y los nuestros miden 12 o 13. El resultado: se toca «Buscar», la página se agranda sola, lo demás se sale por los lados, y hay que hacer pellizco para volver. En un formulario con cuatro campos, cuatro veces. ⭐⭐ Es de lo que más rompe la sensación de que «no funciona», y no lo ve ningún medidor de tamaños: los controles miden bien, la página no desborda, y aun así es inusable. Solo se nota tocando un campo en un iPhone. ⛔ LA SOLUCIÓN FÁCIL ES LA MALA. Poner «maximum-scale=1» en el viewport también quita el zoom automático — y de paso **le impide ampliar la página a quien no ve bien**. No se hace. ⚠️ Y lleva «!important» a propósito: media docena de pantallas fijan su propio tamaño en los campos (13 px), y su hoja de estilos se carga DESPUÉS de ésta, así que ganarían. Esto no es una preferencia de diseño que se pueda pisar por descuido: por debajo de 16 px el teléfono se vuelve inusable. En la computadora se quedan como estaban: aquí solo entra donde se toca con el dedo. */ @media (pointer:coarse), (max-width:560px){ input[type=text],input[type=number],input[type=date],input[type=time], input[type=email],input[type=search],input[type=tel],input[type=password], input:not([type]),select,textarea{ font-size:16px !important; } } /* ⛔⛔ MEDIA PANTALLA DE BOTONES ESCONDIDA SIN QUE NADA LO DIGA. Medido en un teléfono de 390 px: las barras de herramientas del CRM esconden **580 px** a la derecha, y la tabla del Catálogo **335**. El contenido está ahí y se puede rodar con el dedo — pero **el borde se ve limpio y cortado**, igual que si no hubiera nada más. Quien no sabe que hay más, no lo busca. ⭐ El arreglo no es hacerlo caber —serían botones ilegibles— sino **que se note que sigue**. Una sombra en el borde es la señal que todo el mundo entiende sin que se la expliquen. ⭐⭐ Y aparece SOLA cuando hay algo escondido, sin una línea de JavaScript: las capas de fondo van pegadas al CONTENIDO (`local`) y las de sombra a la CAJA (`scroll`). Al llegar al final, el fondo tapa su sombra. Es la técnica clásica de «scroll shadows» y no necesita saber cuántos elementos hay ni escuchar el desplazamiento. Va en táctil y también con ratón: en una ventana angosta pasa lo mismo. */ @supports (background-attachment: local) { .bar, .kpis, .tabla-corre, .rapidas, .chips, .barra, .acc, .filtros { background-image: linear-gradient(to right, var(--s1) 30%, transparent), linear-gradient(to left, var(--s1) 30%, transparent), linear-gradient(to right, rgba(0,0,0,.13), transparent), linear-gradient(to left, rgba(0,0,0,.13), transparent); background-position: left center, right center, left center, right center; background-repeat: no-repeat; background-size: 26px 100%, 26px 100%, 11px 100%, 11px 100%; /* Las dos primeras se pegan al contenido, las dos últimas a la caja: de ahí sale que la sombra solo se vea cuando queda algo por ver. */ background-attachment: local, local, scroll, scroll; } } /* El «Saltar» de la guía medía 53×32: es la salida de un velo que tapa toda la pantalla, así que tiene que ser fácil de tocar — más que cualquier otro botón, no menos. */ @media (pointer:coarse), (max-width:560px){ #guSalta, .guCard .salta { min-height:44px; padding-inline:16px } } /* ⭐⭐ DISCRETO A LA VISTA, TOCABLE CON EL DEDO. «.salta» es lo que borra la configuración y empieza de cero, y su letra chica y su color tenue son DELIBERADOS: está anotado en el CRM que con el mismo peso visual que el botón de al lado «se toca por error». Pero medía **20 px de alto**, y eso no es discreción: es que tampoco se puede tocar A PROPÓSITO. Quien de verdad quiere empezar de cero se queda picando sin atinar. ⛔ La salida NO es agrandar la letra —eso rompería lo que el comentario protege— sino **darle aire alrededor**: sigue viéndose igual de callado y el dedo ya tiene dónde caer. En escritorio se queda como está: con el ratón se atina a 20 px, y ahí la discreción vale más. ⭐ Y el aire va SOLO abajo y arriba, no a los lados: crecer de ancho sí lo haría parecer un botón normal. */ @media (pointer:coarse), (max-width:560px){ .salta{ min-height:44px; display:inline-flex; align-items:center; justify-content:center; } }