/* La cola de revisión. Mismo stack que `maqueta/static` y `panel/static`: * CSS plano, sin build y sin framework. * * Lo que esta hoja tiene que lograr, y por qué: * * - **Que la discrepancia salte.** El 82,8 % de los casos son unánimes, así * que lo interesante es la excepción. La banda minoritaria lleva color y * borde; la mayoritaria es gris. Si las dos se vieran igual, lo * interesante se perdería entre lo obvio. * - **Que los cuatro estados se distingan a ojo**, no solo en el texto: * cuatro colores, cuatro rótulos. * - **Que «familia desconocida» no se parezca a «de afuera».** Son tres * chips con tres colores; el desconocido es el único punteado, porque * «no se sabe» no es un valor más, es la ausencia de uno. * - **Que el texto crudo se lea como texto crudo.** `white-space: * pre-wrap` conserva los saltos del modelo y el `\-` o el `**` se ven * literales, que es la forma visual de «aquí no pasó ningún renderer». */ :root { --tinta: #16202b; --tinta-suave: #5a6b7c; --papel: #ffffff; --fondo: #f4f6f8; --linea: #dde3e9; --azul: #1f4e79; --rojo: #b3261e; --ambar: #8a6100; --verde: #1b6b3a; --violeta: #5b3a8a; } * { box-sizing: border-box; } /* `hidden` TIENE que ocultar. La hoja del navegador trae `[hidden]{display:none}`, pero es de ORIGEN UA: pierde contra cualquier regla de autor que declare `display` sobre el mismo elemento. Sin esta línea, `.login{display:flex}` de más abajo le gana y el gate de login queda pintado sobre la pantalla con el atributo `hidden` puesto —que es exactamente lo que pasaba: quien llegaba con sesión viva de Google veía `caja.hidden = true` en el DOM y la tarjeta igual tapándolo todo, sin botón, sin mensaje y con `position:fixed; inset:0; z-index:10` comiéndose los clics—. Va GLOBAL y no en `.login[hidden]`: el defecto no es de ese elemento, es de cualquiera que combine `hidden` con una clase o un id que traiga `display`. Hoy en esta hoja el único expuesto es `.login`, pero el front oculta tres elementos con `hidden` (`#login`, `#login-btn`, `#banner`) y el de al lado —la maqueta, de donde viene esta hoja— ya tiene un `.login-caja #login-btn{display:flex}` esperando a que alguien lo copie. Un arreglo por caso deja vivo el próximo. Y va con `!important` porque sin eso no alcanza: una `[hidden]` pelada es (0,1,0) y pierde contra `.login-caja #login-btn` (1,1,0) o contra cualquier id. Con `!important` gana sin depender del orden ni de la especificidad. Mismo arreglo, palabra por palabra, que `maqueta/static/styles.css` y `panel/static/styles.css`. Esta hoja nació de la de la maqueta y se quedó sin esta línea. */ [hidden] { display: none !important; } body { margin: 0; font: 15px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: var(--tinta); background: var(--fondo); } code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .92em; } /* --- cabecera ---------------------------------------------------------- */ .top { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 14px 20px; background: var(--papel); border-bottom: 1px solid var(--linea); } .top h1 { margin: 0; font-size: 19px; } .sub { margin: 2px 0 0; color: var(--tinta-suave); font-size: 13px; } .quien { color: var(--tinta-suave); font-size: 13px; } .tabs { display: flex; gap: 6px; padding: 10px 20px 0; } .tab { border: 1px solid var(--linea); border-bottom: none; background: var(--papel); padding: 8px 14px; border-radius: 6px 6px 0 0; cursor: pointer; font: inherit; } .tab:hover { background: #eef3f8; } .controles { padding: 10px 20px; } .ctrl-caja { display: flex; flex-direction: column; gap: 6px; } .ctrl-fila { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .ctrl-rotulo { color: var(--tinta-suave); font-size: 13px; } .sel-reactivo, .sel-corrida { font: inherit; padding: 4px 8px; } /* El valor cuando no hay nada que elegir. Se dibuja como DATO y no como * control apagado: un `