/* ============================================================ E1 · el sistema visual ============================================================ Astra lo dijo sin rodeos: la interfaz de obra NO es la plantilla de E1. Obra es una herramienta de trabajo para alguien que camina una casa con casco; E1 es de un señor que quiere saber cómo están sus cosas. No se parecen y no deben parecerse. De ahí las decisiones: · CALMA, NO TABLERO. Nada de rejillas de números grandes. La pantalla empieza con una frase en español que dice cómo están las cosas, y debajo lo que necesita atención. Un tablero lleno de cifras sin acción es precisamente lo que §6 pide evitar. · TIPOGRAFÍA CON JERARQUÍA DE VERDAD. Una escala corta (7 pasos) y solo dos pesos. Si todo grita, nada se lee. · COLOR CON SIGNIFICADO, NO DECORATIVO. El acento se usa para lo accionable. El rojo SOLO para lo vencido. Y hay un color propio —gris punteado— para «no se sabe», que es el estado que este producto se toma en serio. · ZONAS TÁCTILES DE 44 px como mínimo, porque se usa con el pulgar y a veces con el sol encima. PALETA: la de las láminas de Planeación — azul #1857C9, tinta #172238, superficies blancas, fondo #EEF1F5. La versión anterior era arena y verde; se cambió porque la identidad la fija Salvador, no yo. TIPOGRAFÍA: las láminas piden Manrope para títulos y Source Sans 3 para cuerpo. NO SE PUEDEN CARGAR AQUÍ y hay que decirlo en vez de fingirlo: el proyecto no mete dependencias de red, y esos archivos no vienen en el paquete. Va una pila del sistema con las mismas proporciones —peso 700 para títulos, 400/600 para cuerpo— y las familias quedan nombradas primero, así que el día que existan los archivos entran solas sin tocar una línea. ============================================================ */ :root{ /* La paleta de las láminas. */ /* LA PALETA DE LA BASE VISUAL, con el contraste medido y no supuesto —la propia base dice que son «referencias de la muestra, no autorización de sustituir todos los colores existentes sin comprobar contraste»—: texto #172238 sobre blanco 15.88:1 texto #172238 sobre el fondo 14.69:1 secundario #58667B sobre blanco 5.83:1 acción #1E56C8 sobre blanco 6.52:1 blanco sobre el botón #1E56C8 6.52:1 acción sobre selección #E8EFFC 5.65:1 Todo eso pasa AA con holgura. El divisor #E1E6ED da 1.25:1, que está bien para una línea entre renglones —el contenido ya separa— pero NO para el borde de un control, donde WCAG pide 3:1. Por eso `--linea-fuerte` no es el divisor aclarado: es #7d8a9e, que da 3.50:1 sobre blanco y 3.24:1 sobre el fondo. */ --fondo:#f5f6f8; --tarjeta:#ffffff; --tarjeta-2:#f7f9fc; --linea:#e1e6ed; --linea-fuerte:#7d8a9e; --tinta:#172238; --tinta-2:#58667b; --tinta-3:#8592a8; --acento:#1e56c8; --acento-claro:#e8effc; --acento-tinta:#123f92; --alerta:#b3261e; /* SOLO vencido */ --alerta-claro:#fdecea; --aviso:#8a5a12; /* pronto, en espera, por confirmar */ --aviso-claro:#fdf3e0; --r-s:10px; --r:14px; --r-l:20px; --sombra:0 1px 2px rgba(28,26,23,.04), 0 6px 20px rgba(28,26,23,.05); --sombra-alta:0 8px 40px rgba(28,26,23,.16); /* Escala tipográfica: 7 pasos y se acabó. */ --t-xs:11.5px; --t-s:13px; --t-m:15px; --t-l:17px; --t-xl:21px; --t-2xl:26px; --t-3xl:32px; --e-1:4px; --e-2:8px; --e-3:12px; --e-4:16px; --e-5:24px; --e-6:32px; --e-7:48px; /* Las escribe `marca.js`. Aquí van los valores de respaldo, para que la app se vea bien aunque ese módulo no llegue a correr. */ --tipo-titulos:"Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif; --tipo-cuerpo:"Source Sans 3",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif; } @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){ --fondo:#0f1521; --tarjeta:#18202e; --tarjeta-2:#1e2836; --linea:#2a3446; --linea-fuerte:#3c4860; --tinta:#eef2f8; --tinta-2:#a9b5c8; --tinta-3:#7a8699; --acento:#7aa6f5; --acento-claro:#152744; --acento-tinta:#b9d0fb; --alerta:#f2b8b5; --alerta-claro:#3a1d1b; --aviso:#e8c284; --aviso-claro:#3a2d14; --sombra:0 1px 2px rgba(0,0,0,.4); --sombra-alta:0 8px 40px rgba(0,0,0,.6); } } *{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{ margin:0; background:var(--fondo); color:var(--tinta); /* «Source Sans 3» va primero: si algún día están los archivos, entra sola. */ font:var(--t-m)/1.5 var(--tipo-cuerpo); overflow-x:hidden; padding-bottom:calc(70px + env(safe-area-inset-bottom)); } h1,h2,h3{margin:0;font-family:var(--tipo-titulos); font-weight:700;letter-spacing:-.02em;line-height:1.22} p{margin:0} button,input,select,textarea{font:inherit;color:inherit} [hidden]{display:none!important} ::selection{background:var(--acento-claro);color:var(--acento-tinta)} /* ---------- encabezado ---------- */ .cab{ position:sticky; top:0; z-index:30; background:var(--fondo); padding:calc(var(--e-3) + env(safe-area-inset-top)) var(--e-4) var(--e-3); display:flex; align-items:center; gap:var(--e-3); border-bottom:1px solid transparent; transition:border-color .2s; } .cab.pegada{border-color:var(--linea)} .cab h1{font-size:var(--t-xl); flex:1; min-width:0} .cab .sub{font-size:var(--t-s); color:var(--tinta-3); font-weight:400; display:block; margin-top:1px} .senal{ display:inline-flex; align-items:center; gap:6px; flex:none; min-height:34px; padding:0 var(--e-3); border-radius:999px; border:1px solid var(--linea); background:var(--tarjeta); font-size:var(--t-xs); color:var(--tinta-2); cursor:pointer; } .senal .led{width:7px;height:7px;border-radius:50%;background:var(--acento)} .senal.sin{background:var(--aviso-claro);color:var(--aviso);border-color:transparent} .senal.sin .led{background:currentColor} main{padding:0 var(--e-4) var(--e-6); max-width:720px; margin:0 auto} /* ---------- marca y distintivo de muestra ---------- */ .marca{flex:1; display:flex; align-items:center; gap:var(--e-3); min-width:0} .logo{font-family:var(--tipo-titulos); font-weight:800; font-size:var(--t-l); letter-spacing:.06em; color:var(--acento); white-space:nowrap} /* El nombre puede ser MÁS LARGO que SERENO el día que lo elija naming. Se encoge antes de empujar al distintivo de muestra fuera de la pantalla. */ .marca{min-width:0} .marca>[data-marca-logo]{flex:0 1 auto; min-width:0; overflow:hidden} .marca>[data-marca-logo] .logo{display:block; overflow:hidden; text-overflow:ellipsis} /* Siempre visible. Si la demo se enseña en una junta, nadie tiene que acordarse de que los datos son de prueba: lo dice la pantalla. */ /* `flex:none` NO es cosmético: con un nombre largo —y el nombre va a cambiar, porque SERENO es provisional— el reparto elástico comprimía este distintivo hasta «De…». El aviso de que los datos son ficticios no se encoge; el que se encoge es el logo, que la persona ya sabe cómo se llama. */ .demo{flex:none; font-size:var(--t-xs); color:var(--tinta-2); background:var(--tarjeta); border:1px solid var(--linea); border-radius:999px; padding:4px var(--e-2); white-space:nowrap} .titular{max-width:720px; margin:0 auto; padding:var(--e-2) var(--e-4) 0} .titular h1{font-size:var(--t-2xl)} .titular .sub{display:block; font-size:var(--t-s); color:var(--tinta-3); margin-top:2px} @media (min-width:860px){ .titular{margin:0; padding-left:var(--e-5); max-width:760px} } /* NO se esconde en pantallas chicas. La primera versión la ocultaba por debajo de 380 px «para que cupiera», y esconder justo en el teléfono el aviso de que los datos son ficticios es esconderlo donde más importa. Se acorta el texto, que es otra cosa. */ @media (max-width:519px){ .demo{font-size:10.5px; padding:3px 7px} } /* ---------- el saludo de Inicio ---------- */ .resumen{ padding:var(--e-4) 0 var(--e-5); } .resumen .frase{font-size:var(--t-2xl); line-height:1.2; letter-spacing:-.02em} .resumen .frase em{font-style:normal; color:var(--acento)} .resumen .frase b{font-weight:650; color:var(--alerta)} .resumen .pie{margin-top:var(--e-2); color:var(--tinta-2); font-size:var(--t-s)} /* ---------- secciones ---------- */ .seccion{margin-bottom:var(--e-5)} .seccion>h2{ font-size:var(--t-xs); text-transform:uppercase; letter-spacing:.09em; color:var(--tinta-3); margin:0 0 var(--e-2) 2px; font-weight:650; } .seccion>h2 .cuenta{color:var(--tinta-3); font-weight:400; letter-spacing:0; text-transform:none} .tarjeta{ background:var(--tarjeta); border:1px solid var(--linea); border-radius:var(--r); box-shadow:var(--sombra); overflow:hidden; } /* ---------- filas ---------- */ .fila{ display:flex; gap:var(--e-3); align-items:center; width:100%; min-height:56px; padding:var(--e-3) var(--e-4); border:0; border-bottom:1px solid var(--linea); background:none; text-align:left; cursor:pointer; } .fila:last-child{border-bottom:0} .fila:hover{background:var(--tarjeta-2)} .fila:active{background:var(--linea)} .fila.quieta{cursor:default} .fila.quieta:hover{background:none} .fila .barra{flex:none; width:3px; align-self:stretch; border-radius:2px; background:var(--linea-fuerte); margin:10px 0} .fila .barra.vencida{background:var(--alerta)} .fila .barra.hoy,.fila .barra.pronto{background:var(--aviso)} .fila .barra.calma{background:var(--acento)} .fila .barra.nose{background:repeating-linear-gradient(180deg,var(--tinta-3) 0 3px,transparent 3px 6px)} .fila .txt{flex:1; min-width:0} /* Hasta DOS líneas antes de cortar. En 375 px, «Garantía de muestra por vencer» se quedaba en «Garantía de muestra por…», que es justo la parte que no dice nada. El subtítulo sí se corta en una: ahí lo importante va primero. */ .fila .tit{display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; font-weight:550; line-height:1.35} .fila .sub{display:block; font-size:var(--t-s); color:var(--tinta-2); margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap} .fila .flecha{flex:none; color:var(--tinta-3); font-size:var(--t-l)} /* ---------- etiquetas ---------- */ .etq{ flex:none; font-size:var(--t-xs); font-weight:550; white-space:nowrap; padding:4px var(--e-2); border-radius:999px; background:var(--linea); color:var(--tinta-2); } .etq.mala{background:var(--alerta-claro); color:var(--alerta)} .etq.media{background:var(--aviso-claro); color:var(--aviso)} .etq.buena{background:var(--acento-claro); color:var(--acento-tinta)} :root[data-theme="dark"] .etq.buena{color:var(--acento)} @media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .etq.buena{color:var(--acento)}} /* «No se sabe» tiene aspecto propio: borde punteado y gris. Si se pintara de rojo, el sistema estaría gritando por un dato que nunca tuvo. */ .etq.nose{background:transparent; color:var(--tinta-3); border:1px dashed var(--linea-fuerte); font-weight:400} .etq.origen{background:transparent; color:var(--tinta-3); font-weight:400; font-size:var(--t-xs); padding-left:0} .etq.ficticio{background:repeating-linear-gradient(45deg,var(--aviso-claro) 0 6px,transparent 6px 12px); color:var(--aviso); border:1px solid var(--aviso-claro)} /* ---------- botones ---------- */ .btn{ display:flex; align-items:center; justify-content:center; gap:var(--e-2); width:100%; min-height:50px; padding:0 var(--e-4); border-radius:var(--r-s); border:1px solid transparent; background:var(--acento); color:#fff; font-weight:600; cursor:pointer; margin-top:var(--e-3); } /* Lo cazó Astra: `:root:not([data-theme="light"])` se cumple SIEMPRE, porque el HTML nunca fija ese atributo. O sea que el texto oscuro del tema oscuro se estaba aplicando también en claro. La primera corrección fue dejar blanco SIEMPRE, y estaba mal por el otro lado: en tema oscuro el acento es un azul CLARO (#7aa6f5) y blanco sobre él no llega ni a 2:1. Lo destapó la comprobación de marca al mirar el oscuro. Ahora cada tema lleva el suyo, con el guardado donde corresponde: dentro del `@media`, que es lo único que de verdad significa «oscuro». */ @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .btn{color:#0d1a2e} :root:not([data-theme="light"]) .op[aria-pressed="true"]{color:#0d1a2e} } :root[data-theme="dark"] .btn{color:#0d1a2e} :root[data-theme="dark"] .op[aria-pressed="true"]{color:#0d1a2e} .btn.suave{background:var(--tarjeta); color:var(--tinta); border-color:var(--linea-fuerte)} .btn.texto{background:none; color:var(--acento); border:0; min-height:44px; font-weight:550} .btn:active{transform:scale(.99); opacity:.9} .btn[disabled]{opacity:.45; cursor:not-allowed} /* ---------- estados ---------- */ .estado{padding:var(--e-6) var(--e-4); text-align:center} .estado .ico{font-size:30px; line-height:1; margin-bottom:var(--e-3); opacity:.5} .estado b{display:block; font-size:var(--t-l); margin-bottom:var(--e-2)} .estado p{color:var(--tinta-2); font-size:var(--t-s); max-width:36ch; margin:0 auto} .cargando{padding:var(--e-5) var(--e-4)} .hueso{height:14px; border-radius:7px; background:var(--linea); animation:late 1.4s ease-in-out infinite; margin-bottom:var(--e-2)} .hueso.corto{width:45%} .hueso.medio{width:72%} @keyframes late{0%,100%{opacity:.55}50%{opacity:1}} @media (prefers-reduced-motion:reduce){.hueso{animation:none}} .nota{ display:flex; gap:var(--e-3); padding:var(--e-3) var(--e-4); border-radius:var(--r-s); background:var(--tarjeta-2); border:1px solid var(--linea); font-size:var(--t-s); color:var(--tinta-2); margin:var(--e-3) 0; } .nota.aviso{background:var(--aviso-claro); border-color:transparent; color:var(--aviso)} .nota.mala{background:var(--alerta-claro); border-color:transparent; color:var(--alerta)} .nota b{color:inherit} /* ---------- buscar ---------- */ .buscar{position:relative; margin-bottom:var(--e-4)} .buscar input{ width:100%; min-height:48px; padding:0 var(--e-4) 0 42px; border:1px solid var(--linea); border-radius:var(--r-s); background:var(--tarjeta); color:var(--tinta); } .buscar input:focus{outline:2px solid var(--acento); outline-offset:-1px; border-color:transparent} .buscar .lupa{position:absolute; left:var(--e-3); top:50%; transform:translateY(-50%); color:var(--tinta-3); pointer-events:none} /* ---------- navegación ---------- */ /* LA BARRA PRINCIPAL, y SOLO ella. Estas reglas decían `nav` a secas, así que alcanzaban a cualquier