*, *::before, *::after { box-sizing: border-box; } /* EL ATRIBUTO `hidden` TIENE QUE GANAR SIEMPRE. El navegador lo aplica con la prioridad mas baja que existe, asi que CUALQUIER regla nuestra con `display` lo pisa sin avisar. Van TRES veces el 20 y 21 de agosto de 2026: «Dejar un recado escrito» visible desde el primer segundo, el boton de un chat que no existe ofreciendose igual, y —la peor— la caja del cofre enseñando un secreto recien abierto SIN QUE NADIE LO PIDIERA, porque `.campo` lleva `display:block`. Esa tercera la cazo una prueba en navegador, no la lectura del codigo: en el HTML el `hidden` estaba puesto y parecia correcto. Se arreglo en el sitio y se olvido aqui, que es la mitad que faltaba. */ [hidden] { display: none !important; } /* ========================================================================== EL TALLER — la zona privada del dueño, en tallerdesistemas.com/taller Hoja propia y no la del sitio: son dos cosas distintas y no tienen por qué moverse juntas. El sitio es una tarjeta de presentación que cambia poco; esto es un tablero de trabajo que va a cambiar cada semana. Compartir la hoja obligaría a mirar el sitio cada vez que se toque el panel. Los colores sí son los de la marca: es el mismo taller. ========================================================================== */ :root { --grafito: #1F2933; --grafito-suave: #3E4C59; --grafito-tenue: #616E7C; --gris-claro: #9AA5B1; --ambar: #D97706; /* PARA TEXTO, NO PARA BORDES. El ambar de arriba da 3.19:1 sobre blanco y un texto necesita 4.5:1 — dimension 6 de la experiencia de uso. Se separan en vez de oscurecer el ambar entero: como borde y como fondo esta bien, y cambiarlo cambiaria la marca. Este da 5.02:1. */ --ambar-texto: #B45309; --ambar-claro: #F59E0B; --papel: #FFFFFF; --papel-tenue: #F7F6F4; --linea: #E4E1DC; --verde: #2F7A4F; --radio: 4px; --ancho: 64rem; --tipo: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } * { box-sizing: border-box; } body { margin: 0; font-family: var(--tipo); color: var(--grafito); background: var(--papel-tenue); line-height: 1.6; /* LAS BARRAS DE ANDROID. Con `viewport-fit=cover` en el viewport —que hace falta para que estos valores existan— la aplicación se dibuja DE BORDE A BORDE, por debajo de la barra de estado y de los botones de navegación. Android 15 lo impone y no se puede desactivar; lo que sí se puede es apartarse, y eso es esto. Sin estas cuatro líneas la interfaz se traslapa con el reloj arriba y con los botones de navegación abajo. */ padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); } /* --- la cabecera, oscura: se distingue del sitio de un vistazo --- */ .cabecera { background: var(--grafito); color: var(--papel); padding: 14px 20px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .cabecera__logo { width: 26px; height: 26px; flex: 0 0 auto; } .cabecera__nombre { font-weight: 600; letter-spacing: .01em; } .cabecera__nota { margin-left: auto; /* EL COLOR SE QUEDA COMO ESTABA. Lo cambie a `--grafito-tenue` mirando su contraste SOBRE BLANCO —5.21:1— sin caer en que esta cabecera es OSCURA: ahi ese gris da 2.83:1 y el de siempre da 5.9:1. Arreglar un numero contra el fondo equivocado es empeorarlo con cara de arreglo, y lo canto la propia medida en la vuelta siguiente. Lo que si estaba corto era el TAMAÑO: 13.1 px, y aqui se dice «zona privada» y, en dos pantallas, es el enlace para volver. */ color: var(--gris-claro); font-size: .875rem; } /* EL ENLACE DE VOLVER, QUE ES EL MAS TOCADO DE TODOS. Medido: 80 x 19 px en seis pantallas y 59 x 21 en dos. La mitad de lo que pide un dedo, y en la esquina de arriba, que es lo mas lejos del pulgar. Es el control que mas se usa en toda la aplicacion y era el mas pequeño. */ .volver { display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px 0 2px; margin-left: -2px; } .contenido { max-width: var(--ancho); margin: 0 auto; padding: 26px 20px 60px; } h1 { font-size: 1.5rem; margin: 0 0 .2rem; } h2 { font-size: 1.05rem; margin: 2.2rem 0 .8rem; padding-bottom: .35rem; border-bottom: 1px solid var(--linea); } .entradilla { color: var(--grafito-suave); margin: 0 0 1.4rem; } /* --- las fichas de herramienta --- */ .rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 12px; } .ficha { display: block; background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio); padding: 14px 16px; text-decoration: none; color: inherit; } a.ficha:hover, a.ficha:focus { border-color: var(--ambar); outline: none; } /* Y LA FILA SE ENROLLA SI NO CABE. En un telefono con la letra del sistema en grande —280 px utiles— la etiqueta de estado «en el navegador» se salia 13 px por la derecha y no habia forma de leerla entera. Se encontro barriendo las trece pantallas del panel el 9 de octubre de 2026, buscando el mismo fallo que el dueño fotografio en el chat. Era la unica que lo tenia. */ .ficha__nombre { font-weight: 600; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; min-width: 0; } .ficha__que { color: var(--grafito-tenue); font-size: .88rem; margin-top: .25rem; } /* Lo que existe y lo que no, dicho por su nombre y no por un color: un color solo es una pista para quien lo distingue, y aquí hay que poder leerlo. E-023 y la regla de la alternativa no cromática. */ .estado { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; border: 1px solid currentColor; border-radius: 999px; padding: .05rem .5rem; } .estado--listo { color: var(--verde); } .estado--falta { color: var(--grafito-tenue); } .nota { background: var(--papel); border: 1px solid var(--linea); border-left: 3px solid var(--ambar); border-radius: var(--radio); padding: 12px 16px; margin: 1.2rem 0; font-size: .92rem; } .pie { color: var(--grafito-tenue); font-size: .82rem; margin-top: 2.5rem; border-top: 1px solid var(--linea); padding-top: 1rem; } code { background: var(--papel); border: 1px solid var(--linea); padding: 0 .25rem; border-radius: 3px; } /* -------------------------------------------------------------------------- Lo que hizo falta cuando el panel dejó de ser HTML quieto -------------------------------------------------------------------------- */ .ficha--ancha { grid-column: 1 / -1; margin-bottom: 1.2rem; } .ficha--visto { opacity: .72; } .rejilla--una { grid-template-columns: 1fr; } .boton { min-height: 44px; /* área táctil: se toca con el pulgar */ padding: .5rem 1rem; /* OCHO PIXELES DE AIRE, EN LOS DOS EJES. A los lados eran .4rem —6.4 px— y arriba y abajo .2rem, que entre dos botones apilados son otros 6.4. Por debajo de los 8 que pide un dedo para no darle al de al lado, y en un telefono estrecho estos botones se apilan casi siempre: el hueco que importa es el vertical. Lo primero que se arreglo fue el horizontal, y la medida siguiente seguia en rojo por el otro — la mitad de un arreglo se parece mucho a ninguno. */ margin: .25rem .5rem .25rem 0; border: 1px solid var(--grafito); border-radius: var(--radio); background: var(--grafito); color: var(--papel); font: inherit; cursor: pointer; } .boton:hover, .boton:focus { background: var(--grafito-suave); outline: none; } .boton--tenue { background: var(--papel); color: var(--grafito); border-color: var(--linea); } .boton--tenue:hover, .boton--tenue:focus { border-color: var(--ambar); background: var(--papel-tenue); } label { font-size: .9rem; color: var(--grafito-suave); } /* LOS TIPOS SE NOMBRAN UNO A UNO, y por eso hay que acordarse de añadir el nuevo. Al meter el campo del servidor con `type="url"` —que es el tipo correcto: el teclado del teléfono cambia— se quedó SIN ESTILO y medía 21 px de alto en vez de 44. Se veía raro y no se notaba; lo cazó la medida de la mano. */ input[type="text"], input[type="password"], input[type="url"], input[type="email"], input[type="tel"], input[type="number"] { width: 100%; max-width: 34rem; min-height: 44px; margin-top: .25rem; padding: .45rem .6rem; border: 1px solid var(--linea); border-radius: var(--radio); font: inherit; color: var(--grafito); background: var(--papel); } input:focus { outline: 2px solid var(--ambar); outline-offset: 1px; } .dato { margin: .3rem 0; font-size: .95rem; } .dato b { color: var(--grafito-suave); font-weight: 600; } /* Los tres avisos llevan palabra Y color: el color solo es una pista para quien lo distingue — alternativa no cromática. */ .bien { color: var(--verde); font-size: .88rem; } /* Un aviso es texto, y del que importa: 3.19:1 no vale. */ .aviso { color: var(--ambar-texto); font-size: .88rem; } .mal { color: #B02A1E; font-size: .88rem; } /* La casilla de «actualizar sola», con su etiqueta en la misma línea. */ .linea { display: flex; align-items: center; gap: .5rem; font-size: .95rem; color: var(--grafito); } .linea input[type="checkbox"] { width: 1.1rem; height: 1.1rem; } /* EL QR VA EN BLANCO Y NEGRO PASE LO QUE PASE. No hereda el color del panel a proposito: en tema oscuro un codigo gris sobre gris no lo lee ninguna camara, y el fallo no se ve —el dibujo parece correcto—. El marco blanco de alrededor tampoco es adorno: sin esa zona de respiro el lector no encuentra donde empieza el codigo. */ .qr { margin: .8rem 0; padding: 12px; background: #fff; display: inline-block; border-radius: 4px; } .qr canvas { display: block; image-rendering: pixelated; } .qr__pie { color: #333; font-size: .8rem; margin: .4rem 0 0; text-align: center; } /* --------------------------------------------------------------------------- DONDE SE ESCRIBE O SE LEE UN VALOR, UNA LETRA QUE SE DISTINGA Lo pidió el dueño: «la tipografía no deja distinguir entre el cero y la letra O mayúscula, esto impide transcribir a mano las contraseñas». La raíz se arregló en otro sitio —las contraseñas ya se generan sin 0, O, 1, l ni I— pero una llave en base64 los lleva por fuerza, y esa hay que poder leerla. Aquí se pide una monoespaciada de las que sí los diferencian: casi todas dibujan el cero más estrecho o con un punto dentro, y la ele con una curva al final. `font-variant-numeric: slashed-zero` pide además el cero tachado a las tipografías que lo tienen. Donde no lo tengan, no pasa nada: se ignora. --------------------------------------------------------------------------- */ input[type="password"], input[type="text"]#llave, .valor { font-family: ui-monospace, "SF Mono", "Cascadia Mono", "Segoe UI Mono", Menlo, Consolas, "Liberation Mono", monospace; font-variant-numeric: slashed-zero; letter-spacing: .02em; } /* EL RENGLON DE UNA CASILLA ES SU BLANCO, y tiene que dar los 44 px. La casilla mide 13 px; lo que el dedo acierta es la etiqueta entera, asi que es ella la que tiene que ser tocable — no el cuadradito, que inflado queda raro. Medido en «Recibir llamadas de voz», que era 195 x 16. */ label:has(> input[type="checkbox"]), label:has(> input[type="radio"]) { display: flex; align-items: center; gap: .6rem; min-height: 44px; cursor: pointer; } /* ============================================================================= LAS HERRAMIENTAS, AGRUPADAS POR OFICIO «Esto me permitirá simplificar la vista y tener ordenadas mis herramientas por clasificación.» Se agrupa LA VISTA y no el código: cada plugin sigue siendo un local independiente con su papel y sus pruebas. Dónde se ve es una decisión de pantalla; juntarlos de verdad sería lo contrario de lo que se construyó. ========================================================================== */ .grupo__titulo { margin: 1.6rem 0 .2rem; font-size: .82rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--grafito-tenue); } /* El primero no separa de nada: pegado al borde de arriba deja un hueco que se lee como que falta algo. */ .grupo__titulo:first-of-type { margin-top: .6rem; } .grupo__que { margin: 0 0 .5rem; font-size: .86rem; color: var(--grafito-tenue); } /* LO PRIMERO SE VE PRIMERO, Y SE VE DISTINTO. «Planificación de proyectos arriba, creo que es la que más voy a utilizar.» Ocupa el ancho entero y lleva el ámbar del taller en el borde: si estuviera igual que las demás, estar arriba sería lo único que la distinguiría, y eso se pierde en cuanto la lista crece. */ .ficha--principal { grid-column: 1 / -1; border-left: 3px solid var(--ambar); } .ficha--principal .ficha__nombre { font-size: 1.05rem; } /* --- los grupos se enrollan ------------------------------------------------ «Si entro buscando la salud del sitio no ocupo ver todo lo demás, solo me dirijo a la clasificación La máquina directamente.» Con `
`, igual que el esquema de proyectos y el menú del sitio: lo abre el navegador, se maneja con el teclado sin escribir una línea, y sigue funcionando si el guion no llega. */ .grupo > summary { cursor: pointer; list-style: none; min-height: 44px; display: flex; align-items: center; gap: .4rem; } .grupo > summary::-webkit-details-marker { display: none; } .grupo > summary::marker { content: ""; } .grupo > summary::before { content: "▸"; color: var(--grafito-tenue); transition: transform .18s ease; display: inline-block; } .grupo[open] > summary::before { transform: rotate(90deg); } .grupo > summary:hover { color: var(--grafito); } /* Y SE OCULTA DE VERDAD LO QUE HAY DENTRO. El navegador esconde solo el contenido de un `
` cerrado… salvo que ese contenido traiga su propio `display`. `.rejilla` es `display: grid`, y eso GANA: las fichas seguían pintadas, ocupando 344×158 px cada una, con el grupo cerrado. El plegado se veía funcionar —la flecha giraba— y no plegaba nada. Lo peor no fue el fallo, fue que la prueba lo daba por bueno: miraba el atributo `open`, que sí cambiaba, en vez de mirar si el contenido se ve. Una comprobación que mide el interruptor y no la luz. */ .grupo:not([open]) > *:not(summary) { display: none; } /* UNA FICHA QUE ES BOTON SE VE IGUAL QUE UNA QUE ES ENLACE. Lo que hace no cambia por cómo esté escrita, y la mano no distingue entre un `` y un `