/* ════════════════════════════════════════════════════════════════════════════ TEMA · el sistema visual de Novoconect desde el 6 de septiembre de 2026 ──────────────────────────────────────────────────────────────────────────── Traducción de `tema.css` (Tailwind v4 + shadcn/ui) al lenguaje del producto: HTML, CSS y JS a mano, sin empaquetador. Los valores son LOS MISMOS, uno a uno. Lo único que cambia es de dónde salen: donde había una clase de utilidad («gap-6», «text-sm») hay ahora la medida que esa clase generaba. TRES COSAS QUE HAY QUE SABER PARA LEER ESTO: 1 · LOS SELECTORES `[data-slot="…"]` SE HAN CONSERVADO. Son los de shadcn. El fichero de Marc solo SOBRESCRIBE ese componente base, así que aquí está primero la base —bajada del registro público de shadcn, no inventada— y encima, sin tocarla, su capa. Conservarlos permite comparar con el original línea a línea. 2 · EL INTERRUPTOR ES `data-tema`, EL QUE YA TIENE EL PRODUCTO. El fichero original trae la paleta clara en `:root` y la oscura en `.dark`. Aquí van al revés porque el producto arranca OSCURO y marca el claro con `html[data-tema="claro"]`, que es lo que escribe el SERVIDOR en el subdominio de admin y lo que lee el localStorage de siempre. Los colores son idénticos. Solo cambia a qué selector cuelgan. 3 · LA TIPOGRAFÍA VA DENTRO. Geist y Geist Mono viven en ./fuentes/, sacadas del paquete `geist` 1.7.2 (SIL Open Font License). NI GOOGLE NI NINGÚN CDN: el panel de red de estas pantallas tiene que salir a cero peticiones de fuera, y una tipografía remota lo rompe además de contarle a un tercero quién entra y cuándo. ══════════════════════════════════════════════════════════════════════════ */ @font-face{ font-family:"Geist"; font-style:normal; font-weight:100 900; font-display:swap; src:url("./fuentes/Geist-Variable.woff2") format("woff2") } @font-face{ font-family:"Geist Mono"; font-style:normal; font-weight:100 900; font-display:swap; src:url("./fuentes/GeistMono-Variable.woff2") format("woff2") } /* ───────────────────────────────────────────────────────── PALETA: sacada del propio Soft Aurora #f7f7f7 su color1 #e100ff su color2 el resto son negros construidos alrededor de ellos ───────────────────────────────────────────────────────── */ :root{ --radius: .625rem; /* 10px */ --radius-sm: calc(var(--radius) - 4px); /* 6px */ --radius-md: calc(var(--radius) - 2px); /* 8px */ --radius-lg: var(--radius); /* 10px */ --radius-xl: calc(var(--radius) + 4px); /* 14px */ --font-sans: "Geist", -apple-system, "Segoe UI", Roboto, sans-serif; --font-mono: "Geist Mono", ui-monospace, monospace; /* OSCURO, que es como arranca el producto */ color-scheme: dark; --background:#000000; --foreground:#F7F7F7; --card:#0A0A0C; --card-foreground:#F7F7F7; --popover:#0E0E11; --popover-foreground:#F7F7F7; --primary:#F7F7F7; --primary-foreground:#08080A; --secondary:#141418; --secondary-foreground:#F7F7F7; --muted:#141418; --muted-foreground:#8A8A96; --accent:#1A1020; --accent-foreground:#F7F7F7; --destructive:#FF5C47; --border:#1D1D22; --input:#26262D; --ring:#E100FF; --borde-campo:#6E6E82; /* #37 · el paso INTERMEDIO entre «no es esta» y «es esta». Es la mezcla exacta de --muted-foreground y --foreground, no un gris a ojo: si un dia cambia cualquiera de los dos, este tiene que ir con ellos. */ --pestana-roce:#C1C1C7; /* 28/09 · EL VERDE DE «HECHO BIEN» (la exclusiva conseguida). UNO y el mismo en los dos temas. Va como FONDO con tinta oscura (#08080A, 5,9:1 · AA), no como letra: ningún verde pasa AA como texto sobre el fondo oscuro Y sobre el claro a la vez (haría falta una luminancia ≤0,183 para el claro y ≥0,19 para el oscuro). Sobre la tarjeta oscura el relleno mide 5,9:1 y sobre la blanca 3,4:1 (≥3:1, lo que pide una forma). */ --exito:#22A05B; /* 09/10 · el verde como TEXTO (el €/m² de una ficha por debajo de su zona): sobre el negro vale el mismo; sobre el blanco se oscurece para llegar a 4,5:1, que es lo que pide un texto. */ --exito-txt:#22A05B; } html[data-tema="claro"]{ color-scheme: light; --exito-txt:#15803D; --background:#FAFAFA; --foreground:#08080A; --card:#FFFFFF; --card-foreground:#08080A; --popover:#FFFFFF; --popover-foreground:#08080A; --primary:#08080A; --primary-foreground:#FAFAFA; --secondary:#F1F1F3; --secondary-foreground:#08080A; --muted:#F1F1F3; --muted-foreground:#6B6B75; --accent:#F4EAFB; --accent-foreground:#08080A; --destructive:#D42B1F; --border:#E3E3E8; --input:#DDDDE3; --ring:#E100FF; --borde-campo:#80808E; --pestana-roce:#3A3A40; } /* 🔴 #14 · QUE `hidden` OCULTE DE VERDAD, Y ESTO ES LA RAÍZ. `[hidden]` es una regla del NAVEGADOR con especificidad cero: cualquier clase nuestra que ponga `display` la pisa sin avisar. Y eso es lo que pasaba con `.hoja .dos-salidas{ display:flex }`: la hoja de «Dárselo a un agente» hacía `$('h-salidas').hidden = true` y la caja SEGUÍA VISIBLE — 44 px de botón, sin texto y sin hacer nada, porque esa hoja no tiene botón de aceptar. Medido el 08/09/2026: hidden=true, display=flex, alto=44, texto="". ⚠️ El bug no era de esa hoja: era de todo el producto. `hidden` se usa en catorce sitios y en cualquiera de ellos podía estar pasando lo mismo sin que nadie lo viera. Por eso se arregla aquí y no allí. ⚠️ `!important` a propósito, y es de los pocos que hay: `hidden` no es un estilo, es un hecho — si algo está oculto no hay ningún caso en que una clase deba poder enseñarlo. */ [hidden]{ display:none !important } /* 🔴 #64 · EL HOVER SOLO DONDE HAY RATÓN, Y ESTO ES LA RAÍZ. Marc, en el móvil: «seleccionas las 3 líneas, clicas la X, y se queda seleccionado». Medido con toque de verdad: tras tocar la X, el botón seguía con el fondo del hover —`:hover` da true— porque en una pantalla táctil el «puntero» se queda donde se tocó hasta que se toca otra cosa. No era el menú ni la X: era el hover pegado, y le pasa a CUALQUIER cosa con :hover que se toque. Por eso el arreglo no es en el botón del menú: TODAS las reglas con :hover de esta hoja van dentro de @media (hover:hover), que es «hay un puntero que puede flotar». En el móvil no existen; en el escritorio no cambia nada. Cuarenta y cuatro reglas, envueltas con un script que contó antes y después (561 reglas las dos veces). Una regla nueva con :hover va también envuelta, o se queda pegada en el móvil. */ *,*::before,*::after{ box-sizing:border-box; margin:0; padding:0 } *{ border-color: var(--border) } html,body,#raiz{ min-height:100% } /* ══ LA ALTURA DE LA PANTALLA EN EL MÓVIL ══════════════════════════════════ En un móvil hay TRES alturas y no una: lvh · con la barra del navegador escondida — la más alta svh · con la barra a la vista — la más baja dvh · la de ahora mismo, que cambia al aparecer y desaparecer la barra `100vh` es lvh: por eso una pantalla hecha con vh sale más alta que el hueco que se ve y lo de abajo queda debajo de la barra. En este producto NO HAY NI UN `100vh` —se buscaron los tres nombres, incluidos `h-screen` y `min-h-screen`, y no aparece ninguno—, así que aquí no hay nada que arreglar: hay que elegir entre svh y dvh, y la elección no es la misma en todas las pantallas. ⚖️ LA REGLA, Y ESTÁ ESCRITA SITIO A SITIO ABAJO: · dvh donde NO se escribe. La pantalla acompaña a la barra y se siente como una app, que es lo que pidió Marc. · svh donde SÍ se escribe. El teclado también encoge la altura dinámica, así que con dvh la caja se recoloca mientras se teclea. Un formulario que se mueve bajo los dedos es peor que un hueco de 60 px. Y siempre las dos, en este orden: el navegador que no entienda dvh se queda con svh, que es la que nunca corta. */ #raiz{ min-height:calc(100svh / var(--zoom, 1)); min-height:calc(100dvh / var(--zoom, 1)) } /* 🔴 LA VENTANA YA NO SE DESPLAZA: SE DESPLAZA LA APP. Con la página entera moviéndose, la cabecera se iba hacia arriba, la barra del navegador entraba y salía, y la barra de desplazamiento del sistema cruzaba la pantalla por la derecha. Eso es una web. Ahora el único que se mueve es el cuerpo —.lienzo— y la cabecera se queda donde está sin ser `position:fixed`: es un hermano que no está dentro de lo que se desplaza, que se sostiene solo. ⚠️ Las pantallas SIN .cola —la pública— siguen desplazándose en la ventana, y por eso esto no está en `html`: está en el body de las que tienen app. */ body:has(.cola){ overflow:hidden } /* 🔴 #90 · TODO MÁS GRANDE EN EL MÓVIL · Marc, 12/09/2026: «un hombre con dedos gruesos no puede clicar bien ni leer bien lo actual; súbelo hasta que sea ideal». Hay 95 tamaños de letra de 10 a 13 px escritos uno a uno; subirlos de uno en uno es 95 sitios y 95 oportunidades de desigualar. Se sube TODO de golpe con `zoom` en la raíz, que escala letra, botones, márgenes y huecos a la vez —lo que se toca y lo que se lee crecen juntos—: un 10 %. Los botones de 40 px pasan a 44 (el mínimo táctil de Apple), la letra de 13 a 14,3. Medido en pruebas a 414: sin desbordamiento horizontal en las cuatro pantallas. Solo en el móvil: el escritorio tiene su propia rejilla (#72) y se lee de más lejos con ratón, no con el dedo. */ /* 🔴 A (Marc, 12/09/2026) · EL ZOOM Y LAS ALTURAS DE VIEWPORT NO SE LLEVAN BIEN. Medido a 414×896: `100dvh` dentro de una raíz con zoom 1.1 mide 896 px de CSS que se pintan a 985 → la app era un 10 % más alta que la pantalla y la ventana podía desplazarse 90 px (en iOS, que ignora el overflow:hidden del body, con el dedo): o se perdía la cabecera o no se llegaba al final. Todo alto de viewport se divide por --zoom, que vale 1 donde no hay zoom. */ @media (max-width:640px){ html{ zoom:1.1; --zoom:1.1 } } body{ background:var(--background); color:var(--foreground); overflow-y:auto; overflow-x:hidden; font-family:var(--font-sans); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; letter-spacing:-.012em } a{ color:inherit; text-decoration:none } button{ font-family:inherit; font-size:inherit; color:inherit; background:none; border:0; cursor:pointer } input,textarea{ font-family:inherit } svg{ display:block; flex:none } /* ══ LA BASE DE SHADCN ═════════════════════════════════════════════════════ Bajada del registro público (estilo new-york-v4) y traducida. Cada bloque lleva al lado las clases de utilidad de las que sale, para poder cotejarlo. ═══════════════════════════════════════════════════════════════════════════ */ /* Card · "flex flex-col gap-6 rounded-xl border bg-card py-6 text-card-foreground shadow-sm" El relleno LATERAL lo pone AQUÍ y solo aquí. Ver la nota de abajo. */ [data-slot="card"]{ display:flex; flex-direction:column; gap:24px; padding:26px 20px; border:1px solid var(--border); border-radius:var(--radius-xl); background:var(--card); color:var(--card-foreground); box-shadow:0 1px 3px 0 rgb(0 0 0/.1), 0 1px 2px -1px rgb(0 0 0/.1) } /* 🔴 EL RELLENO LATERAL SE PAGABA DOS VECES. shadcn lo reparte: la tarjeta pone el de arriba y abajo (`py-6`) y cada hijo pone el suyo a los lados (`px-6`). Sumado a un relleno lateral en la tarjeta son 24+24 = 48 px que se le quitan al campo por dentro sin que se vean por fuera. Con la tarjeta a 356 px eso deja el campo en 267; poniéndolo una sola vez pasa a 314. Cuarenta y siete píxeles de diferencia, que es exactamente lo que hacía que un correo de treinta letras se cortara. Los hijos van a CERO a los lados. El relleno vive en un solo sitio. */ [data-slot="card-header"]{ display:grid; grid-auto-rows:min-content; align-items:start; gap:8px; padding:0 0 4px } [data-slot="card-content"]{ padding:0 } [data-slot="card-footer"]{ display:flex; align-items:center; padding:0 } /* CardTitle · «Entra» es el título del panel, no una etiqueta más. La escala manda: marca 34 › título 23 › etiquetas 14. */ [data-slot="card-title"]{ font-size:23px; line-height:1.15; font-weight:600; letter-spacing:-.026em; text-align:center } /* CardDescription · "text-sm text-muted-foreground" */ [data-slot="card-description"]{ font-size:14px; line-height:20px; color:var(--muted-foreground); text-align:center } /* FieldGroup · la separación entre campos */ [data-slot="field-group"]{ display:flex; width:100%; flex-direction:column; gap:22px } /* Field (vertical) · "flex w-full gap-3 flex-col [&>*]:w-full" */ [data-slot="field"]{ display:flex; width:100%; flex-direction:column; gap:12px } [data-slot="field"] > *{ width:100% } /* FieldLabel · "flex w-fit gap-2 leading-snug" + Label "text-sm font-medium" */ [data-slot="field-label"]{ display:flex; width:fit-content; gap:8px; line-height:1.375; font-size:14px; font-weight:500 } /* FieldDescription · "text-sm leading-normal font-normal text-muted-foreground" */ [data-slot="field-description"]{ font-size:14px; line-height:1.5; font-weight:400; color:var(--muted-foreground) } [data-slot="field-description"] a{ text-decoration:underline; text-underline-offset:4px } @media (hover:hover){ [data-slot="field-description"] a:hover{ color:var(--primary) } } /* Input · "h-9 w-full min-w-0 rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none md:text-sm" */ [data-slot="input"]{ width:100%; min-width:0; padding:4px 12px; /* 🔴 EL BORDE DE UN CAMPO ES LO ÚNICO QUE DICE DÓNDE SE ESCRIBE, y no se veía: medido, 1,22 en oscuro y 1,20 en claro contra un listón de 3,0. Sube a un color propio en vez de tocar --input, que lo usa media interfaz — tarjetas, tablas, separadores— y subirlo entero convertiría el producto en una rejilla. Medido DONDE ESTÁ EL CAMPO y no donde uno cree (ver LEY 35 y el borde de los botones, que se midió dos veces por eso mismo). */ border:1px solid var(--borde-campo); border-radius:var(--radius-md); color:inherit; font-size:14px; outline:none; box-shadow:0 1px 2px 0 rgb(0 0 0/.05); transition:color .15s ease, box-shadow .15s ease, border-color .15s ease } [data-slot="input"]::placeholder{ color:var(--muted-foreground) } [data-slot="input"]:disabled{ pointer-events:none; cursor:not-allowed; opacity:.5 } /* Button · "inline-flex shrink-0 items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-all outline-none" + size default h-9 px-4 py-2 */ [data-slot="button"]{ display:inline-flex; flex:none; align-items:center; justify-content:center; gap:8px; padding:8px 16px; border:1px solid transparent; border-radius:var(--radius-md); font-size:14px; font-weight:500; white-space:nowrap; outline:none; box-shadow:none } /* D · la transición la pone el molde, al final */ [data-slot="button"]:disabled{ pointer-events:none; opacity:.5 } [data-slot="button"] svg{ pointer-events:none; flex:none; width:16px; height:16px } [data-slot="button"][data-variant="default"]{ background:var(--primary); color:var(--primary-foreground) } @media (hover:hover){ [data-slot="button"][data-variant="default"]:hover{ background:color-mix(in srgb, var(--primary) 90%, transparent) } } /* outline · "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50" ⚠️ LA CAPA `dark:` NO ES ADORNO. Con el `bg-background` de la variante clara, en oscuro el botón se pinta del NEGRO DEL BODY encima de una tarjeta que es #0A0A0C: deja de parecer un botón y parece un agujero. Se vio en el cuadro de «¿Sin contraseña?». */ /* 🔴 EL BORDE DE LOS «outline» SUBE A 3,0 DE CONTRASTE · 08/09/2026. Un botón outline no tiene fondo propio: su borde ES el botón. Medido con el medidor ya probado (ver LEY 35), el borde daba **1,32** en oscuro y **1,23** en claro — o sea, casi invisible: se lee el texto pero no parece un botón, y un botón que no parece botón no lo pulsa nadie. La WCAG pide 3,0 para lo que no es texto. Con el fondo real de cada tema —#0A0A0C y #FAFAFA— eso son estos dos, medidos uno a uno: oscuro #626272 → 3,12 claro #8E8E9D → 3,09 ⚠️ El de oscuro se midió DOS VECES: #5F5F6E daba 3,07 sobre el fondo de la página (#0A0A0C) y 2,98 sobre el del cuadro de diálogo (rgb 18,18,22), que es un pelo más claro. Se mide donde está el botón, no donde uno cree. ⚠️ Es un borde bastante más marcado que el de shadcn, y es a propósito: lo otro era un adorno. Las variables --input y --border NO se tocan, que las usa media interfaz; esto es solo el borde de estos botones. ⏳ Quedan fuera, y son decisión de Marc: los bordes de los CAMPOS (1,2 en las dos), el botón «Ver más» de Propietarios y las pestañas de admin. */ [data-slot="button"][data-variant="outline"]{ border-color:#6E6E82; background:color-mix(in srgb, var(--input) 30%, transparent); box-shadow:0 1px 2px 0 rgb(0 0 0/.05) } @media (hover:hover){ [data-slot="button"][data-variant="outline"]:hover{ background:color-mix(in srgb, var(--input) 50%, transparent) } } html[data-tema="claro"] [data-slot="button"][data-variant="outline"]{ border-color:#80808E; background:var(--background) } @media (hover:hover){ html[data-tema="claro"] [data-slot="button"][data-variant="outline"]:hover{ background:var(--accent); color:var(--accent-foreground) } } [data-slot="button"][data-variant="ghost"]{ background:none } @media (hover:hover){ [data-slot="button"][data-variant="ghost"]:hover{ background:var(--accent); color:var(--accent-foreground) } } [data-slot="button"][data-size="icon"]{ width:36px; height:36px; padding:0 } /* 🔴 EL TAMAÑO PEQUEÑO · #61 y #62 de la pasada de Marc, 08/09/2026: «el botón de Tu equipo parece texto» y «devolver a su lista / a la lista general parecen texto». Eran dos sitios con su propio CSS de «botón sin borde», o sea texto con cursor. Un botón es un botón del sistema; lo que les faltaba era un tamaño que cupiera en una línea de ficha. Es el `sm` de shadcn (h-8, px-3) con la letra de 13 px que ya usaban. */ [data-slot="button"][data-size="sm"]{ height:32px !important; padding:0 12px; font-size:13px; gap:6px } /* Badge outline · "inline-flex w-fit items-center justify-center gap-1 rounded-full border px-2 py-0.5 text-xs font-medium" + "border-border text-foreground" */ [data-slot="badge"]{ display:inline-flex; width:fit-content; flex:none; align-items:center; justify-content:center; gap:4px; overflow:hidden; padding:2px 8px; border:1px solid var(--border); border-radius:9999px; font-size:12px; line-height:16px; font-weight:500; white-space:nowrap; color:var(--foreground) } [data-slot="badge"] svg{ width:12px; height:12px; pointer-events:none } /* ══ EL PUNTO DE LA MARCA ══════════════════════════════════════════════════ CLASE DE SISTEMA, no del acceso. El punto de «Novoconect.» va con `.punto` en TODAS las pantallas. Los colores no son de gusto: salen del propio fondo —el #E100FF es el color2 del Soft Aurora— y el recorrido pasa por donde pasa la aurora, hasta el casi blanco del color1 y de vuelta. Veinticuatro segundos es a propósito: tan lento que no se ve moverse, solo se nota que no es el mismo de hace un rato. Un latido rápido sería un adorno pidiendo atención en la pantalla donde alguien está tecleando su contraseña. ═══════════════════════════════════════════════════════════════════════════ */ @keyframes latido-marca{ 0%{color:#E100FF} 20%{color:#A66BFF} 40%{color:#5C8CFF} 60%{color:#F2F2F7} 80%{color:#FF5CB0} 100%{color:#E100FF} } .punto{ animation: latido-marca 24s ease-in-out infinite } @media (prefers-reduced-motion: reduce){ .punto{ animation:none; color:#E100FF } } /* ══ LA MUESCA DEL MÓVIL ═══════════════════════════════════════════════════ CLASES DE SISTEMA. Lo que va pegado al borde de arriba o de abajo lleva `.techo` o `.suelo` y deja de meterse debajo de la muesca o de la barra del gesto. ⚠️ `env(safe-area-inset-*)` vale CERO si el `` no lleva `viewport-fit=cover`. Sin eso el navegador no pinta bajo el borde, así que no hay hueco que compensar y estas dos reglas se quedan en los 14 px. Comprobado: de las ocho pantallas del producto lo llevan siete. La que no es producto.html, y ahí NO se ha añadido a propósito —ver docs—. Los 14 px son el suelo, no el techo: en un móvil sin muesca `env()` da 0 y sin el `max()` lo pegado al borde se quedaría pegado al borde. ═══════════════════════════════════════════════════════════════════════════ */ .techo{ padding-top: max(14px, env(safe-area-inset-top)) } .suelo{ padding-bottom: max(14px, env(safe-area-inset-bottom)) } /* ══ EL MOLDE DEL BOTON ═════════════════════════════════════════════════════ Las tres cosas que hace un boton al pulsarlo. Salen de la pagina de efectos que mando Marc el 07/09/2026; lo que las dispara vive en boton.js y aqui esta como se ven. ⚠️ Van sobre `[data-slot="button"]`, que es como se marcan los botones del sistema nuevo, y NO sobre `button` a secas: hay botones que no son botones —las pestañas de abajo, la equis de cerrar, las tres rayas— y hundirlos al pulsar los convertiria en otra cosa. ⚠️ Y EL SISTEMA VIEJO YA TIENE EL SUYO, que no se toca: ui.css hunde a .97 con la luz champan, y eso es una ley de Marc —«el tacto sale del boton + Añadir»—. Aqui es .965 porque es lo que dice la maqueta nueva. Dos numeros a la vez mientras dure la migracion, uno cuando termine; lo que NO puede haber es dos dentro del mismo sistema, que es como estaba antes de esa ley. */ :root{ --hunde:.965 } /* uno solo para todo el sistema nuevo */ /* 🔴 #94 · LA CURVA NO EXISTÍA · 12/09/2026. Once transiciones de esta hoja dicen `var(--curva)` —las tres líneas del menú, el hundido de los botones, los botones de devolver…— y `--curva` no estaba definida en ningún sitio: una variable que no existe invalida la transición ENTERA (medido: el navegador daba «0s» para `.tres path`). Por eso las tres líneas «se convertían en X» a golpe (#36 dijo que giraban, y no giraban), y por eso Marc lo llama brusco. Es la curva del sistema, la de la maqueta de Marc (`.entra`) y la única que admite la prueba 15. */ :root{ --curva:cubic-bezier(.16,1,.3,1) } /* 🔴 D · UN SOLO LENGUAJE DE PULSACIÓN · Marc, 12/09/2026: «el efecto bueno es el de Volver a Equipo… sácalo a un único estilo compartido y aplícalo a TODOS los elementos pulsables». Ese botón no tiene nada propio: es este molde ([data-slot="button"]). Lo que no es un botón del sistema pero se pulsa —las pestañas de arriba, las de abajo del agente, las tarjetas del equipo, los chips— lleva `data-pulsa` y recibe EXACTAMENTE lo mismo: se hunde a --hunde con --curva y marca dónde le has dado (la onda, boton.js). Se define aquí y en ningún otro sitio. */ /* 1 · SE HUNDE · las reglas están AL FINAL de esta hoja (§ EL MOLDE, AL FINAL): así ganan a cualquier `transition` escrita antes para un botón concreto (.chip, .icono-btn…), que es como se cuelan dos lenguajes. */ /* 2 · MARCA DONDE LE HAS DADO. El circulo sale de las coordenadas del dedo y se borra solo al acabar. `isolation` y `overflow` son los que lo mantienen dentro del boton; sin ellos se desborda y pinta una mancha en la pantalla. */ :is(button, [data-slot="button"], [data-onda], [data-pulsa]){ position:relative; overflow:hidden; isolation:isolate } /* 🔴 10/10 · Marc: nada de fondo gris al tocar lo que no tiene borde. El navegador del teléfono (Safari en el iPhone) pinta su propio rectángulo gris sobre TODO lo que se toca: aquí no se había apagado. Se apaga entero; el «te he oído» lo dicen el hundimiento y, en lo que tiene forma, la onda (boton.js). */ *, *::before, *::after{ -webkit-tap-highlight-color:transparent } .onda{ position:absolute; border-radius:50%; transform:scale(0); pointer-events:none; background:currentColor; opacity:.22; animation:onda .55s var(--curva) forwards } @keyframes onda{ to{ transform:scale(2.4); opacity:0 } } /* 3 · DICE QUE ESTA TRABAJANDO. El texto se va y queda la ruedecita, asi el boton no cambia de tamaño y la fila no salta. */ /* 🔴 #76 · EL BOTÓN BLANCO, TERCERA CARA · Marc, 12/09/2026: «al clicar el CTA de crear contraseña, y el de Enviar la invitación, desaparece el texto y el CTA se ve todo blanco… es como que el loader sale en blanco». Medido: los botones que traen su PROPIA ruedecita (login, activar, Añadir) llevaban `color:inherit !important` para escapar del transparente de abajo, y `inherit` es el color del PADRE —el blanco de la hoja—, no el negro del botón principal: texto blanco y rueda blanca sobre el botón blanco. No es que se fuera el texto: es que no se veía. Ahora el transparente solo va a los botones sin rueda propia, y los otros conservan su color de siempre. */ [data-cargando]{ pointer-events:none; position:relative } [data-cargando]:not([data-rueda]){ color:transparent !important } [data-cargando]:not([data-rueda])::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(--foreground); animation:gira .7s linear infinite } [data-slot="button"][data-variant="default"][data-cargando]:not([data-rueda])::after{ color:var(--primary-foreground) } @keyframes gira{ to{ transform:rotate(1turn) } } /* El anillo de foco de shadcn: "focus-visible:border-ring focus-visible:ring-[3px] ring-ring/50" */ [data-slot="button"]:focus-visible,[data-slot="badge"]:focus-visible{ border-color:var(--ring); box-shadow:0 0 0 3px color-mix(in oklch, var(--ring) 50%, transparent) } /* ══ Y ENCIMA, LA CAPA DE MARC · copiada tal cual ══════════════════════════ */ /* SHARP: tarjeta sólida, sin cristal, con canto de 1 px nítido */ [data-slot="card"]{ background:var(--card) !important; border:1px solid var(--border) !important; border-radius:14px !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; box-shadow: 0 0 0 1px rgba(0,0,0,.55), 0 24px 60px -18px rgba(0,0,0,.85); } html[data-tema="claro"] [data-slot="card"]{ box-shadow: 0 1px 2px rgba(8,8,10,.06), 0 18px 44px -20px rgba(8,8,10,.22) } /* el filo de luz de arriba, que es lo que da el aire caro */ [data-slot="card"]::before{ content:""; position:absolute; inset:0 0 auto; height:1px; border-radius:14px 14px 0 0; background:linear-gradient(90deg,transparent,rgba(247,247,247,.16),transparent) } [data-slot="card"]{ position:relative } html[data-tema="claro"] [data-slot="card"]::before{ background:linear-gradient(90deg,transparent,rgba(8,8,10,.08),transparent) } [data-slot="card-title"]{ letter-spacing:-.024em; font-weight:600 } [data-slot="input"]{ border-radius:9px !important; background:var(--secondary) !important; height:40px } /* 29/09 · EL CAMPO DE FECHA ES NUESTRO (fecha.js). El control nativo se salía de su caja en el iPhone y luego no centraba su texto: con CSS no se le puede mandar del todo. Ahora la caja es el campo del sistema y el texto lo pintamos nosotros, centrado; el va encima, del mismo tamaño y transparente, para que el toque abra el selector del teléfono. Nada del control nativo se ve, así que ya no hay nada suyo que se salga. */ .campo-fecha{ position:relative; display:flex; align-items:center; justify-content:center; cursor:pointer; box-sizing:border-box; min-width:0 } .campo-fecha .valor{ pointer-events:none; text-align:center; font-variant-numeric:tabular-nums; white-space:nowrap; overflow:hidden; text-overflow:ellipsis } .campo-fecha.vacio .valor{ color:var(--muted-foreground) } .campo-fecha > input[type="date"]{ position:absolute; inset:0; width:100%; height:100%; min-width:0; margin:0; padding:0; border:0; opacity:0; -webkit-appearance:none; appearance:none; box-sizing:border-box; cursor:pointer; font-size:16px } .campo-fecha:focus-within{ border-color:var(--ring) !important; box-shadow:0 0 0 3px color-mix(in srgb, var(--ring) 22%, transparent) } [data-slot="input"]:focus-visible{ outline:none; border-color:var(--ring) !important; box-shadow:0 0 0 3px color-mix(in oklch, var(--ring) 22%, transparent) } [data-slot="button"]{ border-radius:9px !important; font-weight:500; height:40px } .entra{ animation:sube .8s cubic-bezier(.16,1,.3,1) both } @keyframes sube{ from{opacity:0; transform:translateY(12px)} to{opacity:1; transform:none} } .vineta{ position:fixed; inset:0; z-index:1; pointer-events:none; background:radial-gradient(120% 90% at 50% 42%, transparent 30%, #000 100%) } html[data-tema="claro"] .vineta{ background:radial-gradient(120% 90% at 50% 42%, transparent 40%, rgba(250,250,250,.85) 100%) } /* MÓVIL */ @media (max-width: 480px){ [data-slot="card"]{ border-radius:16px !important } .vineta{ background:radial-gradient(140% 70% at 50% 40%, transparent 22%, #000 100%) } } /* si alguien prefiere no ver movimiento, se lo respetamos */ @media (prefers-reduced-motion: reduce){ .entra{ animation:none } } /* dedo, no ratón: 44 px mínimo en zonas táctiles */ @media (max-width: 640px){ [data-slot="input"]{ height:44px; font-size:16px } /* 16px evita que iOS haga zoom al enfocar */ [data-slot="button"]{ height:44px } .ojo{ height:44px !important; width:44px !important } /* si el ojo mide 44, el hueco del texto también: con 40 la última letra de una contraseña larga se metía debajo del icono */ [data-slot="input"].con-hueco{ padding-right:44px } [data-slot="card"]{ padding-left:18px; padding-right:18px } } /* La regla por altura de pantalla va AL FINAL del fichero. Ver allí. */ /* ══ EL FONDO ══════════════════════════════════════════════════════════════ El .jsx traía un `import './SoftAurora.css'` que no venía en el envío. Son las dos reglas que ese fichero tiene que llevar: llenar al padre y que el canvas no deje el hueco de línea base de los elementos en línea. ═══════════════════════════════════════════════════════════════════════════ */ .aurora{ position:fixed; inset:0; z-index:0 } .aurora canvas{ display:block; width:100%; height:100% } /* ══ EL AVISO · lo que en la maqueta hacía `sonner` ════════════════════════ */ .avisos{ position:fixed; top:16px; left:50%; transform:translateX(-50%); z-index:60; display:flex; flex-direction:column; gap:8px; align-items:center; width:min(420px, calc(100vw - 32px)); pointer-events:none } .aviso{ width:100%; display:flex; gap:10px; align-items:flex-start; padding:12px 14px; border-radius:10px; border:1px solid var(--border); background:var(--popover); color:var(--popover-foreground); box-shadow:0 10px 30px -12px rgba(0,0,0,.6); font-family:var(--font-sans); font-size:13.5px; line-height:1.45; animation:aviso-entra .28s cubic-bezier(.16,1,.3,1) both } .aviso.se-va{ animation:aviso-sale .2s ease forwards } .aviso b{ display:block; font-weight:600 } .aviso span{ display:block; color:var(--muted-foreground) } /* richColors: el error se tiñe, el resto no */ .aviso.malo{ border-color:color-mix(in srgb, var(--destructive) 45%, var(--border)); color:var(--destructive) } .aviso.malo span{ color:color-mix(in srgb, var(--destructive) 72%, var(--muted-foreground)) } .aviso svg{ width:16px; height:16px; margin-top:1px } @keyframes aviso-entra{ from{opacity:0; transform:translateY(-10px)} to{opacity:1; transform:none} } @keyframes aviso-sale{ to{opacity:0; transform:translateY(-8px)} } @media (prefers-reduced-motion: reduce){ .aviso,.aviso.se-va{ animation:none } } /* ══ EL ACCESO ═════════════════════════════════════════════════════════════ Las medidas salen de acceso.jsx y formulario-acceso.jsx, clase de utilidad a clase de utilidad. ═══════════════════════════════════════════════════════════════════════════ */ /* "fixed top-4 right-4 z-20 size-9 grid place-items-center rounded-lg border bg-card text-muted-foreground transition hover:text-foreground" */ .conmuta-tema{ position:fixed; top:16px; right:16px; z-index:20; width:36px; height:36px; display:grid; place-items:center; border-radius:var(--radius-lg); border:1px solid var(--border); background:var(--card); color:var(--muted-foreground); transition:color .15s ease } @media (hover:hover){ .conmuta-tema:hover{ color:var(--foreground) } } .conmuta-tema svg{ width:16px; height:16px } /* 20 px por los cuatro lados y CENTRADO A SECAS. ⛔ AQUÍ HUBO UN CENTRADO ÓPTICO —9vh de más abajo— Y ESTABA MAL. No por la idea, por la aritmética: 9vh son 60 px en un iPhone SE y 84 en un Pro Max, y encima por debajo de 720 px de alto se apagaba. Tres alturas distintas para la misma pantalla, y se notaba pasando de un móvil a otro. Centrado limpio, medido en siete tamaños: 0 px de diferencia entre el hueco de arriba y el de abajo en las siete. */ /* ⚠️ SVH A PROPÓSITO, Y NO ES UN OLVIDO. Aquí hay dos campos y un teclado: con dvh, al abrirse el teclado la altura cambia y la tarjeta —que está CENTRADA— se recoloca mientras el dedo escribe. El hueco de la barra se ve; el salto se sufre. */ .acceso{ position:relative; z-index:10; display:grid; min-height:calc(100svh / var(--zoom, 1)); place-items:center; padding:20px } /* `min-width:0` NO es adorno. Un elemento de rejilla trae `min-width:auto`, o sea que se niega a encogerse por debajo de su contenido: con el texto del sistema agrandado a 24 px, la tarjeta se salía 32 px por la derecha en una pantalla de 320. Con esto encoge y lo de dentro se reparte. */ .acceso-caja{ width:100%; max-width:356px; min-width:0 } /* Un campo trae ancho propio por el atributo `size` (20 caracteres). A 24 px eso son casi 250 px que nadie pidió y que empujan la tarjeta. */ [data-slot="input"]{ min-width:0 } .marca{ margin-bottom:28px; text-align:center } /* "text-[34px] leading-[1.05] font-semibold tracking-[-.045em] sm:text-[40px]" */ .marca h1{ font-size:34px; line-height:1.05; font-weight:600; letter-spacing:-.045em } @media (min-width:640px){ .marca h1{ font-size:40px } } /* "mt-2 text-[13.5px] text-muted-foreground sm:text-[14px]" */ .marca p{ margin-top:8px; font-size:13.5px; color:var(--muted-foreground) } @media (min-width:640px){ .marca p{ font-size:14px } } /* LA FILA DE DEBAJO DE LA CLAVE, donde está hoy: «Recuérdame» a la izquierda y «¿Has olvidado la contraseña?» a la derecha. La maqueta ponía el enlace arriba, pegado a la etiqueta; se queda donde el producto lo tiene. "flex items-center" + "ml-auto text-[12.5px] text-muted-foreground" */ /* `flex-wrap` para el caso extremo: con el texto del sistema agrandado a 24 px en una pantalla de 320, «Recuérdame» y «¿Has olvidado la contraseña?» no caben en la misma línea y el segundo se salía por la derecha. Bajando de línea no se pierde nada. En las medidas normales caben las dos —medido: 17,9 px de hueco a 375— así que esto no mueve un píxel del diseño aprobado. */ .fila-recuerda{ display:flex; align-items:center; gap:12px; margin-top:4px; flex-wrap:wrap } /* ⛔ AQUÍ HUBO UN BOTÓN `.olvide` QUE ABRÍA UN CUADRO, y el cuadro se borró el 08/09/2026 por orden de Marc. Lo que queda es un TEXTO con la dirección dentro: nada que rellenar, nada que abrir. ⚠️ Ya NO lleva `margin-left:auto` ni `text-align:right`: como botón corto se iba a la derecha de la fila; como frase de dos líneas eso lo dejaba descolgado. Ocupa su ancho y se lee de izquierda a derecha, como un texto. */ /* El enlace que lo despliega: en su sitio de siempre, a la derecha de la fila. */ .olvide{ margin-left:auto; font-size:12.5px; text-align:right; color:var(--muted-foreground); text-underline-offset:4px } @media (hover:hover){ .olvide:hover{ color:var(--foreground); text-decoration:underline } } /* Y el texto que aparece debajo. No es un cuadro: es parte de la pantalla. */ .olvide-txt{ margin:10px 0 0; padding:11px 13px; border-radius:9px; background:var(--muted, rgba(127,127,140,.10)); font-size:12.5px; line-height:1.6; color:var(--muted-foreground) } .olvide-txt .enlace{ color:var(--foreground); text-underline-offset:4px } /* EL AVISO DE ERROR SE QUEDA PUESTO. Hoy es un bloque que no se va solo, y quitarlo por un aviso flotante sería perder función: el que falla al entrar tiene que poder leerlo mientras vuelve a escribir. Cambia cómo se ve, no cuánto dura. */ .err{ display:none; gap:9px; align-items:flex-start; margin-top:-8px; padding:10px 12px; border-radius:9px; border:1px solid color-mix(in srgb, var(--destructive) 40%, var(--border)); background:color-mix(in srgb, var(--destructive) 9%, var(--card)); color:var(--destructive); font-size:13px; line-height:1.45 } .err.on{ display:flex } .err svg{ width:15px; height:15px; margin-top:1px; stroke:currentColor } /* el ojo, dentro del campo · "absolute right-0 top-0 grid h-10 w-10 place-items-center" */ .con-ojo{ position:relative } .ojo{ position:absolute; right:0; top:0; width:40px; height:40px; display:grid; place-items:center; color:var(--muted-foreground); transition:color .15s ease } @media (hover:hover){ .ojo:hover{ color:var(--foreground) } } .ojo svg{ width:16px; height:16px } [data-slot="input"].con-hueco{ padding-right:40px } /* «Recuérdame», donde está hoy: en la fila de debajo de los campos */ .recuerda{ display:flex; align-items:center; gap:8px; width:fit-content; font-size:13.5px; color:var(--muted-foreground); cursor:pointer } .recuerda input{ position:absolute; opacity:0; width:0; height:0 } .recuerda .marca-check{ width:16px; height:16px; display:grid; place-items:center; border:1px solid var(--input); border-radius:5px; background:var(--secondary); transition:background-color .15s ease, border-color .15s ease } .recuerda .marca-check svg{ width:11px; height:11px; opacity:0; transition:opacity .12s ease; stroke:var(--primary-foreground) } .recuerda input:checked + .marca-check{ background:var(--primary); border-color:var(--primary) } .recuerda input:checked + .marca-check svg{ opacity:1 } .recuerda input:focus-visible + .marca-check{ border-color:var(--ring); box-shadow:0 0 0 3px color-mix(in oklch, var(--ring) 22%, transparent) } @media (hover:hover){ .recuerda:hover{ color:var(--foreground) } } /* la ruedecita del botón mientras entra */ .rueda{ width:16px; height:16px; border-radius:50%; border:2px solid currentColor; border-right-color:transparent; animation:gira .7s linear infinite } @keyframes gira{ to{ transform:rotate(360deg) } } @media (prefers-reduced-motion: reduce){ .rueda{ animation-duration:2s } } /* EL PIE, EN DOS FRASES. Y «¿Qué es Novoconect?» lejos, que era el mispulsado: pegado a «Escríbenos» se abría el correo cuando lo que se quería era leer qué es esto. Los 32 px de margen dejan unos 39 px de hueco entre los dos textos, contando el interlineado. */ .pie{ margin-top:24px; text-align:center; font-size:12.5px; line-height:1.65; color:var(--muted-foreground) } .pie .enlace{ color:var(--foreground); text-decoration:underline; text-underline-offset:4px; font-size:inherit } @media (hover:hover){ .pie .enlace:hover{ color:#e100ff } } /* 36 px de margen, que con el interlineado dejan los 39 de HUECO. Y el número que importa es el hueco, no el margen: lo que se estaba midiendo mal era la distancia entre las dos cosas que se pulsan con el pulgar. */ .pie .que-es{ display:inline-block; margin-top:36px } /* ══ ZONA DE TOQUE DE 24 px, SIN MOVER UN PÍXEL DE LO QUE SE VE ════════════ El listón es WCAG 2.5.8, nivel AA: 24×24 px, con excepción para los enlaces que van DENTRO de una frase. Los 44×44 son el 2.5.5, nivel AAA, y solo se piden aquí para campos, botón y ojo. Así que «Escríbenos» y el «escríbenos» del cuadro NO se tocan: van dentro de una frase y la norma los exime. Suben estos tres, y suben por dentro: lo que se ve sigue midiendo 17 y 20,6 px, y lo que crece es un rectángulo invisible centrado encima. De 17 a 24 son 3,5 px por lado, así que no se pisan entre ellos ni invaden el campo de arriba. Un pseudo-elemento absoluto recibe el clic por su elemento: por eso amplía la zona sin cambiar la maquetación ni una décima. ═══════════════════════════════════════════════════════════════════════════ */ .olvide, .pie .que-es, .recuerda{ position:relative } .olvide::after, .pie .que-es::after, .recuerda::after{ content:""; position:absolute; left:0; right:0; top:50%; transform:translateY(-50%); height:24px; } /* ══ EL CUADRO DE «¿Has olvidado la contraseña?» ═══════════════════════════ Se queda como está hoy: no es un enlace, es la respuesta a la duda. ═══════════════════════════════════════════════════════════════════════════ */ .velo{ position:fixed; inset:0; z-index:70; display:grid; place-items:center; padding:20px; background:rgba(0,0,0,.55); opacity:0; visibility:hidden; transition:opacity .22s ease, visibility .22s ease } html[data-tema="claro"] .velo{ background:rgba(8,8,10,.32) } .velo.on{ opacity:1; visibility:visible } .cuadro{ width:100%; max-width:380px; padding:24px; border:1px solid var(--border); border-radius:14px; background:var(--card); box-shadow:0 24px 60px -18px rgba(0,0,0,.85); transform:translateY(10px); transition:transform .22s cubic-bezier(.16,1,.3,1) } .velo.on .cuadro{ transform:none } .cuadro h2{ font-size:17px; font-weight:600; letter-spacing:-.024em } .cuadro p{ margin-top:12px; font-size:13.5px; line-height:1.55; color:var(--muted-foreground) } .cuadro p b{ color:var(--foreground); font-weight:600 } .cuadro .enlace{ color:var(--foreground); text-decoration:underline; text-underline-offset:4px; font-size:inherit } /* EL CUADRO DE «CAMBIAR LA CONTRASEÑA» · el del acceso. Dos botones en fila con el principal a la derecha, que es donde lo busca la mano en un dialogo. En movil se apilan: a 380 px de ancho, dos botones con texto largo se pisan. */ .cuadro #olv-form{ margin-top:16px } .cuadro .olv-botones{ display:flex; gap:10px; margin-top:16px; justify-content:flex-end } .cuadro .olv-botones [data-slot="button"]{ flex:0 0 auto } @media (max-width:420px){ .cuadro .olv-botones{ flex-direction:column-reverse } .cuadro .olv-botones [data-slot="button"]{ width:100% } } /* La salida de la agencia sin cuenta: separada y mas pequenia, para que no compita con lo que ha venido a hacer aqui el 99% de la gente. */ .cuadro .olv-pie{ margin-top:18px; padding-top:14px; border-top:1px solid var(--border); font-size:12.5px } @media (hover:hover){ .cuadro .enlace:hover{ color:#e100ff } } .cuadro [data-slot="button"]{ margin-top:20px; width:100% } @media (prefers-reduced-motion: reduce){ .velo,.cuadro{ transition:none } } /* Nadie ve el foco con el ratón, pero con el teclado hace falta. */ :focus-visible{ outline:none } a:focus-visible,.olvide:focus-visible,.pie .enlace:focus-visible,.cuadro .enlace:focus-visible{ border-radius:4px; box-shadow:0 0 0 3px color-mix(in oklch, var(--ring) 45%, transparent) } /* ══ 🔴 LA PANTALLA BAJA · Y VA LA ÚLTIMA, QUE NO ES UN DETALLE ════════════ Un iPhone SE tiene 667 px de alto y con las medidas de arriba el login NO CABE: sale scroll en la pantalla donde solo hay que escribir dos cosas. Se recorta el AIRE —relleno, separación entre campos y el hueco de la marca— y nada más. ⚠️ ESTE BLOQUE ESTUVO A MITAD DEL FICHERO Y NO FUNCIONABA ENTERO. El `margin-bottom:14px` de la marca no llegaba nunca, porque `.marca` se declara más abajo con la misma especificidad y lo de después gana. Medido: la marca seguía en 28 px con la regla «aplicada». Una media query no sirve de nada si lo que quiere pisar se declara después que ella. ⛔ LO QUE NO SE RECORTA NUNCA SON LOS TOQUES. Campos, botón y ojo se quedan en 44 px en todas las medidas: una pantalla pequeña es justo donde peor se acierta con el dedo, así que encoger ahí sería hacerlo al revés. Aquí había una línea que apagaba el centrado óptico. Ya no hace falta: el centrado óptico se ha ido del todo, así que no hay nada que apagar y esta pantalla se centra igual que las demás. ═══════════════════════════════════════════════════════════════════════════ */ @media (max-height: 720px){ [data-slot="card"]{ padding-top:20px; padding-bottom:20px } [data-slot="field-group"]{ gap:16px } .marca{ margin-bottom:14px } } /* ══════════════════════════════════════════════════════════════════════════ LA COLA · /agente ────────────────────────────────────────────────────────────────────────── Un lead a la vez. No es una lista corta: es que la pantalla tiene UN trabajo —la siguiente llamada— y todo lo demás estorba. ══════════════════════════════════════════════════════════════════════════ */ /* La pantalla del agente no tiene ni un campo donde escribir —la nota vive en una hoja aparte—, así que aquí dvh no puede pelearse con ningún teclado y sí hace lo que se busca: la lista acompaña a la barra del navegador en vez de dejar un hueco muerto debajo. */ /* ⚠️ ALTO EXACTO, NO MÍNIMO. Con `min-height` el contenido empujaba la caja hacia abajo y volvía a desplazarse la ventana. Con `height` la caja mide lo que se ve y lo que sobra se desplaza DENTRO. ⚠️ Y menos la franja de la visita de administrador. Ese trozo lo publica cabeza.js en `--tope` porque su alto depende de lo largo que sea el nombre de la agencia: con un número escrito a mano, una agencia de nombre largo parte el texto en dos líneas y la pantalla se sale por abajo. */ .cola{ display:flex; flex-direction:column; height:calc(100svh / var(--zoom, 1)); height:calc(100dvh / var(--zoom, 1) - var(--tope, 0px)) } .cabecera{ display:flex; align-items:center; gap:6px; padding-left:20px; padding-right:14px; padding-bottom:12px } .cabecera .marca-txt{ font-size:15px; font-weight:600; letter-spacing:-.035em } .cabecera .hueco{ margin-left:auto } .icono-btn{ width:36px; height:36px; display:grid; place-items:center; border-radius:9px; color:var(--muted-foreground) } /* D · la transición la pone el molde */ @media (hover:hover){ .icono-btn:hover{ color:var(--foreground); background:var(--secondary) } } .icono-btn svg{ width:18px; height:18px } @media (max-width:640px){ .icono-btn{ width:44px; height:44px } } /* el progreso: una barra fina y una frase. Sin número encima. */ .progreso{ padding:0 20px } .barra{ height:3px; width:100%; border-radius:999px; background:var(--secondary); overflow:hidden } .barra i{ display:block; height:100%; border-radius:999px; background:var(--foreground); transition:width .7s cubic-bezier(.16,1,.3,1) } .quedan{ margin-top:14px; font-size:13.5px; color:var(--muted-foreground) } .quedan b{ color:var(--foreground); font-weight:400; font-variant-numeric:tabular-nums } /* #30 · lo intentado y no cerrado, debajo de «te quedan N». En tono aun mas bajo que la frase de arriba: es contexto, no lo que hay que hacer ahora. */ .aparte{ margin-top:4px; font-size:12.5px; color:var(--muted-foreground); opacity:.8; font-variant-numeric:tabular-nums } /* EL CUERPO · lo único que se mueve. ⚠️ `min-height:0` NO es adorno: un elemento de una caja flexible se niega a encogerse por debajo de su contenido, así que sin esto `flex:1` no le da una altura con la que desplazarse y el desbordamiento se lo vuelve a comer la ventana. Es el mismo detalle que en el acceso con `min-width`. ⚠️ `overscroll-behavior:contain` es lo que impide que al llegar al final se arrastre la página de detrás — el «rebote» que en un móvil se siente como que la app se despega. ⛔ Y NADA DE `scroll-snap-type: mandatory` AQUÍ. Marc lo pidió para «deslizarse de pantalla en pantalla», y eso vale para secciones que ocupan la pantalla entera; en una lista de cuarenta propietarios, un enganche obligatorio secuestra el dedo y no deja parar donde uno quiere. Si se quiere ese tacto, su sitio es la página pública, que sí tiene secciones. */ .lienzo{ flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; width:100%; max-width:32rem; margin:0 auto; padding:20px 20px 28px } /* 🔴 #72 · EN EL ESCRITORIO LA RUEDA DESPLAZA DESDE CUALQUIER SITIO · Marc, 11/09/2026: «no se puede hacer scroll hacia abajo». Medido a 1440×900: la página no desplaza (900/900), lo que desplaza es esta columna de 32 rem, y la rueda con el ratón fuera de ella —484 px de margen a cada lado— no movía nada. La columna pasa a ocupar el ancho entero y el contenido se centra con el relleno: la rueda desplaza en cualquier punto y la lista sigue donde estaba (mismo ancho, misma x). */ @media (min-width:640px){ .lienzo{ max-width:none; padding-left:max(20px, calc((100% - 32rem) / 2)); padding-right:max(20px, calc((100% - 32rem) / 2)) } } /* 🔴 #97 · EN EL ESCRITORIO LAS BARRAS DE DESPLAZAMIENTO SE VEN · Marc, 12/09/2026: «los desplegables de filtros deberían tener barra; y diría que no hay en ningún lado y debería: en la lista del agente no se puede bajar». Las barras se escondieron para el móvil (la de Windows era una franja gris de 15 px); a partir de 1024 px vuelven, finas y del color del producto, en todo lo que desplaza: la ventana, la columna, los desplegables y las hojas. Y la cola del agente desplaza también desde el margen (el mismo relleno centrador del #72). */ @media (min-width:1024px){ html{ scrollbar-color:var(--muted-foreground) transparent } html, body, .lienzo, .elige-lista, .hoja, #h-cuerpo{ scrollbar-width:thin !important; scrollbar-color:color-mix(in srgb, var(--muted-foreground) 55%, transparent) transparent } body::-webkit-scrollbar, .lienzo::-webkit-scrollbar, .elige-lista::-webkit-scrollbar, .hoja::-webkit-scrollbar{ width:8px !important; height:8px } body::-webkit-scrollbar-thumb, .lienzo::-webkit-scrollbar-thumb, .elige-lista::-webkit-scrollbar-thumb, .hoja::-webkit-scrollbar-thumb{ background:color-mix(in srgb, var(--muted-foreground) 55%, transparent); border-radius:999px } } /* ══════════════════════════════════════════════════════════════════════════ EL ESCRITORIO · #72(c) · Marc, 11/09/2026: «no está bien diseñado para desktop: no es visualmente agradable, pantalla centrada». ────────────────────────────────────────────────────────────────────────── Medido a 1440×900: una columna de 512 px en el centro y 464 px de negro a cada lado. Eso es el móvil ensanchado, no un escritorio. A partir de 1024 px el ancho se USA, sin cajas nuevas (ley: menos cajas) y sin tocar el HTML: · Propietarios · los mandos (cifra, buscador, zona, filtros, orden) a la izquierda, FIJOS mientras la lista corre a la derecha. Es lo que hace cualquier lista con filtros (Linear, Stripe): lo que se ajusta no se va con el scroll. · Mi equipo · las fichas de los agentes en DOS columnas: seis agentes se ven de un vistazo sin bajar. · La ficha del agente · lo que se decide (Hoy, Qué le repartes) a la izquierda; lo que se consulta (Su lista, Descartados, A quién ha llamado) a la derecha. La cola del agente NO cambia: es UNA llamada y va centrada a propósito. Por debajo de 1024 px todo sigue como estaba. ══════════════════════════════════════════════════════════════════════════ */ @media (min-width:1024px){ .p-leads .lienzo, .p-equipo .lienzo, .p-ficha .lienzo{ padding-left:max(28px, calc((100% - 64rem) / 2)); padding-right:max(28px, calc((100% - 64rem) / 2)) } /* En el escritorio desplaza LA PÁGINA, no la columna: la cabecera con las pestañas se queda pegada arriba y la rueda funciona en cualquier punto. Y hace falta para la rejilla de abajo: con la columna de alto fijo, la fila flexible de la lista medía el hueco de la ventana y la lista se salía de la rejilla por debajo, encima del «Ver más». Con la página de alto libre, la fila mide lo que mide la lista. */ .p-leads .cola, .p-equipo .cola, .p-ficha .cola{ height:auto; min-height:calc(100dvh / var(--zoom, 1)) } /* body:has(.cola){overflow:hidden} es para el móvil (ver arriba): en el escritorio la ventana vuelve a desplazar, sin la barra del sistema. */ body.p-leads, body.p-equipo, body.p-ficha{ overflow-y:auto } .p-leads .lienzo, .p-equipo .lienzo, .p-ficha .lienzo{ flex:none; overflow:visible; min-height:auto } .p-leads #cabeza, .p-equipo #cabeza, .p-ficha #cabeza{ position:sticky; top:0; z-index:30; background:var(--background) } /* Propietarios: dos columnas, los mandos pegados arriba */ .p-leads .lienzo{ display:grid; grid-template-columns:18rem minmax(0, 1fr); grid-template-rows:auto auto auto auto auto 1fr auto; column-gap:40px; align-content:start } .p-leads .lienzo > *{ grid-column:1; min-width:0 } .p-leads .lienzo > .cifra{ padding:0 } .p-leads .lienzo > #lista, .p-leads .lienzo > .mas{ grid-column:2 } .p-leads .lienzo > #lista{ grid-row:1 / span 6 } .p-leads .lienzo > .mas{ grid-row:7; justify-self:start; margin-top:18px } /* Los mandos se quedan a la vista mientras la lista corre: cada uno es pegajoso con su propio «top», que es la suma de los de arriba (alturas medidas a 1440: 76 · 20+40 · 12+74 · 12+40 · 14+24 = 312 px). La fila sexta (1fr) absorbe el alto de la lista, que abarca las siete: sin esa fila flexible la rejilla repartiría el alto de la lista entre las filas de los mandos y los separaría. */ .p-leads .lienzo > .cifra, .p-leads .lienzo > .busca-prop, .p-leads .lienzo > .zona, .p-leads .lienzo > .fila-mando, .p-leads .lienzo > .orden-frase{ position:sticky; align-self:start } /* …más la cabecera pegada (104 px), el relleno de arriba (20 px) y la franja de visita del administrador cuando la hay (--tope, la publica cabeza.js; medido en producción: sin ella los mandos bajaban 45 px antes de pegarse). */ .p-leads .lienzo > .cifra{ top:calc(124px + var(--tope, 0px)) } .p-leads .lienzo > .busca-prop{ top:calc(220px + var(--tope, 0px)) } .p-leads .lienzo > .zona{ top:calc(272px + var(--tope, 0px)) } .p-leads .lienzo > .fila-mando{ top:calc(358px + var(--tope, 0px)) } .p-leads .lienzo > .orden-frase{ top:calc(412px + var(--tope, 0px)) } /* Mi equipo: las fichas en dos columnas */ .p-equipo .equipo{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px } .p-equipo .ag + .ag{ margin-top:0 } /* La ficha del agente: decidir a la izquierda, consultar a la derecha */ .p-ficha .lienzo{ display:grid; grid-template-columns:minmax(0, 22rem) minmax(0, 1fr); grid-auto-flow:row dense; column-gap:40px; align-content:start; align-items:start } .p-ficha .lienzo > *{ min-width:0 } .p-ficha .lienzo > .titulo, .p-ficha .lienzo > .pie-ficha{ grid-column:1 / span 2 } .p-ficha .lienzo > section.bloque{ grid-column:1 } .p-ficha .lienzo > section.bloque:nth-of-type(n+3){ grid-column:2 } } /* NI UNA BARRA DE DESPLAZAMIENTO DEL SISTEMA. La de Windows es una franja gris de 15 px que no se parece a nada del producto. */ .lienzo{ scrollbar-width:none; -ms-overflow-style:none } .lienzo::-webkit-scrollbar{ width:0; height:0 } /* 🔴 Y ALGO TIENE QUE DECIR QUE HAY MÁS ABAJO, porque la barra era la única pista y se acaba de ir. Una lista cortada por el borde se lee como una lista que se acaba ahí. Se difumina el borde de abajo, y SOLO cuando queda algo: la clase la pone y la quita desliza.js mirando el desplazamiento de verdad. Con `mask` sobre el propio cuerpo, así que no hay ningún elemento nuevo que pueda quedarse flotando encima de un botón. */ .lienzo.hay-mas{ -webkit-mask-image:linear-gradient(to bottom, #000 calc(100% - 44px), transparent); mask-image:linear-gradient(to bottom, #000 calc(100% - 44px), transparent) } /* ── LA TARJETA ─────────────────────────────────────────────────────────── */ .lead{ padding:26px 22px } @media (max-width:640px){ .lead{ padding:22px 18px } } .lead .arriba{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px } /* #82 · la marca de lo último: esquina superior derecha, chapa del sistema */ .lead{ position:relative } .lead .marca-ultimo{ position:absolute; top:14px; right:14px; font-size:11.5px; color:var(--muted-foreground); border-color:var(--border) } .lead .marca-ultimo.luego{ color:var(--foreground); border-color:var(--foreground) } .lead .precio{ font-size:38px; font-weight:600; line-height:1; letter-spacing:-.04em; font-variant-numeric:tabular-nums } .lead .nombre{ margin-top:10px; font-size:15px } .lead .tel{ display:block; margin-top:24px; font-family:var(--font-mono); font-size:26px; letter-spacing:-.02em; font-variant-numeric:tabular-nums; color:inherit } @media (hover:hover){ .lead .tel:hover{ color:#e100ff } } /* La referencia de milanuncios que no es un teléfono (ver telDe en tel.js): se dice en pequeño y sin el mono de los números, que es lo que dice «llama». */ .lead .tel.sin-tel{ font-family:inherit; font-size:14px; letter-spacing:0; color:var(--muted-foreground) } /* ── LOS INTENTOS · lo que se ha probado con este teléfono ──────────────── Va debajo del número y en tono menor: es contexto para la llamada, no un dato del inmueble. */ .lead .veces{ margin-top:8px; font-size:13px; color:var(--muted-foreground) } .lead .veces b{ color:var(--foreground); font-weight:500 } /* ── LA SEGUNDA FILA DE ACCIONES ────────────────────────────────────────── «No contestó» y «Luego hoy» son la salida NORMAL de una llamada —la mayoría no se cogen— pero no son la acción principal: la principal es llamar. Van debajo, sin caja, y con 44 px de alto para que se puedan pulsar con el dedo yendo en el coche. */ .lead .reintentos{ display:flex; gap:18px; margin-top:12px } .lead .reintentos button{ min-height:44px; padding:0 2px; background:none; border:0; color:var(--muted-foreground); font:inherit; font-size:13.5px; cursor:pointer; border-bottom:1px solid transparent } /* D · la transición y el hundido los pone el molde */ @media (hover:hover){ .lead .reintentos button:hover{ color:var(--foreground); border-bottom-color:var(--border) } } /* Descartar saca el lead de la lista y los otros dos no: va al otro extremo de la fila para que no se pulse por vecindad. */ .lead .reintentos .descartar{ margin-left:auto } @media (hover:hover){ .lead .reintentos .descartar:hover{ color:var(--destructive); border-bottom-color:var(--destructive) } } .lead .datos{ margin-top:20px; display:flex; flex-direction:column; gap:4px; font-size:13.5px; color:var(--muted-foreground) } /* ══ EL DIÁLOGO · EL DEL NAVEGADOR, NO UNO NUESTRO ═══════════════════════════ trae hecho lo que cuesta hacer bien: atrapa el foco, cierra con Escape, bloquea lo de detrás y sale por encima de todo sin pelear con ningún z-index. Lo único que le faltaba era entrar y salir animado, y eso ya es CSS puro con @starting-style y allow-discrete. ⚠️ LAS TRES DECLARACIONES HACEN FALTA y no sobra ninguna: la de reposo dice de dónde viene, la de [open] a dónde va, y @starting-style es la que hace que la primera se aplique en el fotograma en que aparece —sin ella el diálogo entra de golpe y solo se anima al cerrarse—. Sale de la página de efectos que mandó Marc el 07/09/2026. */ dialog{ border:1px solid var(--border); border-radius:16px; padding:0; background:var(--card); color:var(--card-foreground); max-width:400px; width:calc(100% - 40px); /* 🔴 SIN ESTO SE PEGA A LA ESQUINA DE ARRIBA A LA IZQUIERDA. El modal se centra con los márgenes automáticos, y la maqueta de la página de efectos no los llevaba porque allí se miraba en un ordenador ancho y el hueco no se notaba. En el móvil del agente sí: se vio mirándolo. */ margin:auto; opacity:0; transform:translateY(14px) scale(.97); transition:opacity .28s var(--curva), transform .28s var(--curva), overlay .28s allow-discrete, display .28s allow-discrete } dialog[open]{ opacity:1; transform:none } @starting-style{ dialog[open]{ opacity:0; transform:translateY(14px) scale(.97) } } dialog::backdrop{ background:rgba(4,4,6,0); backdrop-filter:blur(0px); transition:background .28s var(--curva), backdrop-filter .28s var(--curva), overlay .28s allow-discrete, display .28s allow-discrete } dialog[open]::backdrop{ background:rgba(4,4,6,.66); backdrop-filter:blur(3px) } @starting-style{ dialog[open]::backdrop{ background:rgba(4,4,6,0); backdrop-filter:blur(0px) } } .dlg{ padding:22px } .dlg h3{ margin:0; font-size:18px; font-weight:600; letter-spacing:-.01em } .dlg p{ margin:9px 0 0; color:var(--muted-foreground); font-size:14px; line-height:1.55 } .dlg p b{ color:var(--foreground); font-weight:500 } /* 09/10 · Marc: los botones de los avisos (Mejor no · Descartar…), centrados. */ .dlg .actos{ display:flex; gap:9px; justify-content:center; margin-top:20px; flex-wrap:wrap } .dlg .actos button{ min-height:44px } /* ── EL DESGLOSE DEL DÍA Y LA SALA DE ESPERA ───────────────────────────── El desglose va pegado al número grande y en tono menor: explica de qué está hecho, no compite con él. */ .desglose{ margin:8px 0 0; font-size:13px; color:var(--muted-foreground) } /* La razón por la que el reparto está apagado. Va pegada al campo y no al pie: se lee al mirar el campo, que es cuando surge la pregunta. */ .sin-alta{ margin:10px 0 0; font-size:13px; line-height:1.5; color:var(--muted-foreground) } .llamado .tel-sala{ font-family:var(--font-mono); font-size:13px; font-variant-numeric:tabular-nums; color:var(--muted-foreground) } .l2-sala{ display:flex; align-items:center; justify-content:flex-start; gap:8px 10px; margin-top:6px; flex-wrap:wrap } /* #87 · Marc: «los CTA deberían ser fijos: uno sale al final de una línea y el otro al principio de la siguiente». El apunte del motivo ocupa su línea entera y los dos botones van siempre juntos, debajo, en el mismo orden. */ .l2-sala .apunte{ flex:1 0 100% } .l2-sala .devolver-uno{ flex:0 0 auto } /* ⛔ Aquí había un `.devolver-uno` sin fondo ni borde, con un subrayado al pasar: texto con cursor (#62, Marc: «deberían parecer botones»). Son botones del sistema (outline, sm); el resto lo pone [data-slot="button"]. */ /* ══ LO QUE SE ABRE · «Ver quiénes son», «Ver los 12», «Ver las 30 anteriores» Un
del navegador y no un desplegable nuestro: no hay estado que se pueda quedar mal, funciona sin JavaScript y el teclado ya sabe usarlo. ⚠️ El summary es la zona que se pulsa, así que tiene los 44 px de alto mínimos igual que cualquier botón — en un móvil se falla si no. */ .despliega{ margin-top:12px } /* 10/10 · Marc: «los desplegables deberían activarse al clicar la línea ENTERA, no solo las letras» (como en Seguimiento del agente). Era inline-flex: la zona pulsable acababa donde acababa «Ver cuáles». Ahora el summary ocupa la fila. */ .despliega > summary{ display:flex; width:100%; align-items:center; gap:6px; min-height:44px; cursor:pointer; list-style:none; font-size:13px; color:var(--muted-foreground); border-bottom:1px solid transparent; transition:color .14s var(--curva) } .despliega > summary::-webkit-details-marker{ display:none } @media (hover:hover){ .despliega > summary:hover{ color:var(--foreground); border-bottom-color:var(--border) } } /* La flecha se dibuja aquí y no en el HTML: es decoración del control, no contenido, y así ninguna de las llamadas tiene que acordarse de ella. 🔴 10/10 · Marc: «que funcionen como la de Lo que dice el anuncio, que es muy fluido; cambia en todas». Era el carácter «›», que se sentaba en la línea de base y giraba con otra curva. Ahora es EXACTAMENTE la de .anuncio: el mismo chevron de lucide (15 px, trazo 2, puntas redondas), centrado por el flex del summary y girando 90° en .2s ease. Va como máscara para que tome el color del texto y no haya que poner un en cada desplegable. */ .despliega > summary::before{ content:''; flex:none; width:15px; height:15px; background:currentColor; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center / contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center / contain no-repeat; transition:transform .2s ease } .despliega[open] > summary::before{ transform:rotate(90deg) } .despliega[open] > summary{ margin-bottom:4px } /* Quiénes tiene en su lista. Misma fila que la sala de espera —de ahí que reuse `.llamado`— y solo separa el bloque del número de arriba. */ .quienes{ margin-top:2px } /* La nota que no cabe. El resumen se lee como la nota corta —comillas, tono menor— y el «ver más» es lo único que parece pulsable. */ .nota-larga{ margin:2px 0 0 } .nota-larga > summary{ display:block; cursor:pointer; list-style:none; font-size:13px; line-height:1.5; color:var(--muted-foreground) } .nota-larga > summary::-webkit-details-marker{ display:none } .nota-larga > summary span{ white-space:nowrap; border-bottom:1px solid var(--border) } @media (hover:hover){ .nota-larga > summary:hover span{ color:var(--foreground) } } .nota-larga[open] > summary{ display:none } .nota-larga > .apunte{ margin:0 } /* Los motivos del descarte. Fila que se parte, y nada más: el aspecto del chip es el de `chips.js` y aquí solo se coloca. */ .dd-motivos{ display:flex; flex-wrap:wrap; gap:8px; margin:14px 0 0 } #dd-otro{ margin-top:10px; width:100% } /* ══ «ESTO ES DE HACE UN RATO» ══════════════════════════════════════════════ Cuando la pantalla abre con lo último que sabía, hay que decirlo — y decirlo sin tapar nada. Es una línea fina bajo la cabecera, del color de lo secundario, que desaparece sola en cuanto llega lo nuevo. ⛔ NO es un «Cargando» encima del contenido: el contenido ya está ahí y se puede leer. Taparlo sería cambiar una espera por otra. */ /* ══ EL ESQUELETO · lo que se enseña mientras llega ═════════════════════════ Una ruedecita dice «espera». Un esqueleto dice «esto ya viene y va a tener esta forma», y es lo correcto casi siempre. De la página de efectos que mandó Marc el 07/09/2026. ⚠️ El brillo que lo recorre es la ÚNICA animación larga que se permite aquí (1,3 s): no se está esperando a que termine —es un latido mientras dura la espera— y pararlo dejaría un bloque gris que parece un fallo de pintado. */ .hueso{ border-radius:8px; background:linear-gradient(100deg, var(--secondary) 30%, color-mix(in oklch, var(--secondary) 55%, var(--foreground)) 50%, var(--secondary) 70%); background-size:220% 100%; animation:hueso 1.3s linear infinite } @keyframes hueso{ to{ background-position:-220% 0 } } .esqueleto{ display:grid; gap:26px; padding-top:6px } /* #77 · con un fotograma guardado, el esqueleto no se ve (ver el script de cada pantalla junto al
): lo guardado lo sustituye enseguida. */ html.callado .esqueleto{ visibility:hidden } .esqueleto .ficha{ display:grid; gap:10px } .esqueleto .g{ height:26px; width:62% } .esqueleto .l{ height:12px } .esqueleto .p{ height:12px; width:44% } .esqueleto .b{ height:38px; width:58%; margin-top:6px; border-radius:10px } @media (prefers-reduced-motion:reduce){ .hueso{ animation:none } } /* ══ EL DESPLEGABLE, NUESTRO ════════════════════════════════════════════════ Un `
 con esta clase y sin esto no recorta nada: se sale de la caja como si la clase no estuviera. Pasó aquí con la frase de la regla, y solo se vio forzando el texto del sistema a 24 px. El nombre sí recortaba, y por eso despistaba: es hijo de un flex, y eso ya lo convierte en bloque por su cuenta. · el resto, el recorte en sí. */ .una-linea{ display:block; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap } /* Palabras sin espacios —correos, URLs, referencias de anuncio— abriendo la caja por dentro. `anywhere` parte donde haga falta y solo cuando hace falta. */ .parte-palabras{ overflow-wrap:anywhere; word-break:break-word } /* Una cifra no se corta NUNCA. Si no cabe, encoge. */ .cifra-que-encoge{ font-size:clamp(30px, 9vw, 46px) } /* ══════════════════════════════════════════════════════════════════════════ MI EQUIPO · la vista del responsable ══════════════════════════════════════════════════════════════════════════ */ .cifra{ padding:0 20px } .cifra .n{ font-weight:600; line-height:1; letter-spacing:-.04em; font-variant-numeric:tabular-nums } .cifra .n span{ color:var(--muted-foreground) } /* «Sin reparto» no es una cifra: es una frase, y va más pequeña. */ .cifra .n.sin{ font-size:clamp(26px, 7.5vw, 38px) } .cifra .l{ margin-top:10px; font-size:13.5px; line-height:1.5; color:var(--muted-foreground) } .mando-eq{ display:flex; align-items:center; gap:10px; margin-top:22px } .mando-eq .busca{ position:relative; flex:1; min-width:0 } .mando-eq [data-slot="input"]{ width:100% } .mando-eq [data-slot="button"]{ flex:none; white-space:nowrap } .equipo{ margin-top:16px } .ag{ display:block; width:100%; text-align:left; padding:16px 18px; border:1px solid var(--border); border-radius:12px; background:var(--card) } /* D · la pulsación la pone el molde (data-pulsa) */ @media (hover:hover){ .ag:hover{ border-color:var(--input) } } .ag + .ag{ margin-top:10px } /* #89 · Marc: «Equipo sale muy apretado; Qué es Novoconect en el iPhone sale muy bien». Las fichas del equipo respiran como aquella: más relleno y más aire entre ellas en el móvil (a partir del zoom del #90). */ @media (max-width:640px){ .ag{ padding:20px 20px } .ag + .ag{ margin-top:14px } .equipo{ margin-top:22px } } /* `flex-wrap` para que la cuenta del día se baje de línea en vez de salirse. No cambia nada en las medidas normales —ahí caben las dos— y evita que un objetivo de siete cifras, o el texto del sistema agrandado, echen el número fuera de la tarjeta. */ .ag .fila1{ display:flex; align-items:center; gap:10px; flex-wrap:wrap } .ag .nom{ font-size:15px; font-weight:500; flex:1 1 auto } .ag .hoy{ flex:0 1 auto; min-width:0; font-size:12.5px; color:var(--muted-foreground); white-space:nowrap; font-variant-numeric:tabular-nums } .ag .hoy b{ color:var(--foreground); font-weight:500 } .ag .regla{ margin-top:4px; font-size:12px; color:var(--muted-foreground) } .ag .etqs{ display:flex; flex-wrap:wrap; gap:6px; margin-top:10px } .etq{ padding:3px 9px; border:1px solid var(--border); border-radius:999px; font-size:11.5px; color:var(--muted-foreground); white-space:nowrap } /* `display:block` porque en la tarjeta la barra es un dentro de un