/* El sustrato compartido de las tres pantallas del jukebox. * * ANTES DE ESTE FICHERO NO HABIA NINGUNO: cada pantalla declaraba su propia * paleta en su propio `:root`, y las tres decian casi lo mismo con hexadecimales * copiados a mano. Casi. El ambar era el mismo en las tres —eso estaba escrito * y se cumplia—, pero la brasa no: #B93415 en el papel y #E0563F en la maquina, * sin que ningun sitio dijera que eran el mismo aviso mirado con otra luz. Un * sistema que solo vive en tres comentarios paralelos no es un sistema: es una * costumbre, y las costumbres se pierden en el cuarto fichero. * * DE DONDE SALE ESTO. De La Barra (`D:\MINIMAX\LaBarra\public\shared\tokens.css`), * que es su hermana de diseño a proposito: mismo papel y misma tinta, * hexadecimal por hexadecimal, porque las usa la misma gente en el mismo sitio * y tienen que parecer la misma casa. Alli el color entro por un motivo que * aqui es identico y no hace falta redescubrir: quien usa esto lleva toda la * vida con papel y lapiz, no distingue una pantalla de otra —las dos de papel * eran beige con letras negras— y no sabe que de lo que ve se puede tocar, * porque en una libreta no se toca nada. * * Lo que cambia es el oficio. Alli la metafora es una libreta de cuentas y hay * un bote que no se puede confundir con nada. Aqui la metafora es una GRAMOLA: * una maquina oscura llena de tarjetas impresas. La tablet es la maquina; el * movil y el panel del anfitrion son las tarjetas que se tienen en la mano. * * * ═══ LAS CUATRO REGLAS QUE NO SE ROMPEN ═══════════════════════════════════ * * 1. EL AMBAR ES DE QUIEN ES LA COSA, Y SOLO ESO. Tu turno, tu cancion en la * cola, tu PIN, tu presupuesto de busquedas. Nunca un boton, nunca un * titulo, nunca "queda poco". * * ESTA REGLA SE DECIDIO EN VOZ ALTA Y CONVIENE DEJAR DICHO CONTRA QUE. * En La Barra el ambar es el DINERO y solo el dinero. Aqui no hay dinero, * asi que la pregunta era real: que significa el ambar en el jukebox, o * si no significa nada y habia que soltarlo. Las tres respuestas posibles * eran «lo que suena ahora», «lo que es tuyo» y «nada»: * * · «Lo que suena ahora» — NO. En la maquina, TODO lo que se ve esta * pasando ahora; un color que lo dice todo no dice nada. Y ese oficio * ya lo hace el pino en el panel del anfitrion (`familia-vivo`). * · «Nada, liberalo» — NO, y es la respuesta que habia que descartar con * cuidado, porque soltar un color es mas barato que justificarlo. Pero * este proyecto hace UNA cosa que ninguna otra cola de musica hace: * repartir los turnos con justicia. La pregunta que se hace doce veces * por noche no es «que suena», es «cuando me toca A MI». Un sistema * que reparte y no tiene color para la propiedad esta callado justo * donde tiene que hablar. * · «Lo que es tuyo» — SI. Ademas ya era cierto: las tres pantallas lo * decian por separado desde el 2026-08-30. Aqui solo se escribe una * vez y se aprieta. * * APRETAR SIGNIFICA QUE SE HA IDO ALGO. La segunda acepcion que tenia el * ambar en el panel —sobre la cuota de YouTube, "queda poco"— ESTA FUERA. * Es exactamente la excepcion que La Barra prohibe («ni queda poco ni no * hay gastan ambar; lo que se acaba es brasa»), y se defendia diciendo que * la propiedad siempre es un bloque relleno y aquello siempre era texto. * Una regla que necesita una regla auxiliar para distinguirse de si misma * no se sostiene en un movil a media luz. La cuota se avisa en brasa, que * es el color de lo que se acaba en las dos aplicaciones. * * Y una que se queda, que no es lo mismo que no haberla mirado: el * `.anuncio` de la maquina va en ambar. No es decoracion ni una excepcion * heredada — TODO lo que se anuncia ahi es una intervencion en el reparto * («X quitada por el anfitrion», «colada arriba», «ha quitado a alguien»), * o sea el momento exacto en que cambia de quien es la cosa. El ambar esta * contestando su pregunta. * * Sobre papel el ambar no se lee como texto (2,1:1). Cuando hace falta * ambar en letra se usa `--ambar-tinta` (6,8:1); cuando hace falta que se * vea de un vistazo, va en BLOQUE RELLENO con tinta encima. * * 2. EL COLOR DE LA CASA CONTESTA DOS PREGUNTAS, Y NADA MAS: «¿donde estoy?» * y «¿que puedo pulsar?». Lo llevan la cabecera, el `theme-color` y TODO * lo pulsable de esa pantalla. Un texto que no se pulsa no lleva el color * de la casa; si lo lleva, alguien lo va a tocar. * * turquesa el movil del invitado — la tarjeta que se tiene en la mano * violeta el panel del anfitrion — los mandos de la maquina * violeta de noche la maquina — ver mas abajo * * NINGUNO DE LOS DOS ES EL VERDE, EL AZUL NI LA CIRUELA DE LA BARRA, y es * a proposito: las dos aplicaciones son la misma casa para el mismo socio, * asi que «verde = Me sirvo» tiene que seguir siendo cierto cuando abre el * jukebox. Turquesa y violeta son ademas los tubos de una gramola de * verdad, que es de donde sale todo lo demas de este fichero. * * 3. LO PULSABLE PARECE UNA TECLA. Canto inferior de 4 px mas oscuro, que * adelgaza a 2 y baja 2 al pulsar: el borde de abajo se queda donde * estaba y el de arriba desciende, que es lo que hace una tecla de verdad. * Que un rectangulo de color sea un boton hay que SABERLO; que lo que * sobresale se apriete, no — es el interruptor de la luz, y es anterior a * las pantallas. Por eso el canto no es un adorno y no se quita para * modernizar. * * 4. LAS CIFRAS VAN EN MONOESPACIADA Y TABULAR. Los numeros son la maquina; * los nombres son las personas y van en la de siempre. Aqui el numero de * orden ES el codigo de seleccion de una gramola, asi que ademas va en * bloque —la PESTAÑA de la tarjeta—, que es la firma que cose las tres * pantallas. * * * ═══ LA QUINTA DE LA BARRA NO SE TRASLADA ═════════════════════════════════ * * Alli cada CATEGORIA de la nevera tiene su color, repartido por hash del * nombre para que dar de alta «Aperitivos» no repinte las demas. Se busco el * equivalente honesto aqui y NO LO HAY, candidato a candidato: * * · El genero de la cancion — no existe. YouTube no lo da y el proyecto no lo * guarda. Pintarlo seria inventarse el dato. * · Quien la pidio — es un conjunto ABIERTO que cambia cada noche, asi que el * reparto por hash tendria que repintar la cola entera cuando llega alguien * tarde. Y sobre todo: eso ya tiene color, y es el ambar de la regla 1. Un * segundo sistema para la misma pregunta es peor que ninguno. * · La lista de la que sale — dos listas no se ven nunca juntas en la cola. * Un color que solo aparece de uno en uno no distingue nada. * * Lo que SI existe, y es su equivalente de verdad, ya estaba inventado aqui: en * el panel del anfitrion, LAS TRES FAMILIAS DE TARJETA (`familia-tuyo` ambar, * `familia-vivo` pino, `familia-mando` sin teñir). Es un conjunto CERRADO de * tres, con significado fijo, y no hace falta ningun hash porque no crece. Se * sube aqui para que signifique lo mismo en las dos pantallas de papel: desde * hoy el pino es «esto esta pasando» tambien en el movil. * * Un color que no contesta a una pregunta es decoracion, y la decoracion aqui * estorba. * * * ═══ LA TERCERA PANTALLA, QUE NO ES UNA PANTALLA MAS ══════════════════════ * * La maquina (`jukebox.html`) SIGUE OSCURA, y las tres razones medidas que lo * sostienen estan en la cabecera de `jukebox.css`: se mira a cuatro metros y a * oscuras durante horas; el video del rincon atenuado al 35 % se hunde en negro * y sobre claro se veria mas; y el anuncio en ambar funciona porque interrumpe * un fondo oscuro. Nada de eso ha cambiado. * * Y de las dos preguntas de la regla 2, ahi solo se hace UNA. «¿Donde estoy?» * no se pregunta en un aparato que enseña una sola pantalla a pantalla completa * y sin barra de direcciones; por eso su `theme-color` SIGUE SIENDO LA NOCHE, y * no un color de casa: el color de la maquina es el negro, igual que en una * gramola de verdad. Lo que si se pregunta es «¿que puedo pulsar?», y ahi hay * cuatro cosas: empezar la fiesta, la llave del PIN, salir y pausar. * * LAS CUATRO LAS PULSA EL ANFITRION, NINGUNA UN INVITADO. Asi que la maquina * lleva el VIOLETA DEL PANEL, en su version de noche. No es el mismo hexadecimal * —sobre negro hace falta el violeta claro, no el oscuro— pero es el mismo * color contestando lo mismo: «esto es tuyo, de los mandos». Quien monta el * aparato reconoce sus botones en las dos pantallas, y el turquesa del invitado * no aparece jamas en la maquina, porque un invitado ahi no pulsa nada. * * Con eso se retira ademas la excepcion que llevaba escrita `jukebox.css`: el * boton «Empezar la fiesta» era ambar y ambar significaba «pulsame», la unica * vez en todo el proyecto. Ahora es de la casa y tiene canto, como todo lo * demas que se pulsa. */ :root { /* ── El papel ─────────────────────────────────────────────────────────── Calido, no blanco de oficina: se mira a media luz y con el brillo del movil bajo. Mismos valores que La Barra, hexadecimal por hexadecimal. */ --fondo: #F1EDE7; /* la gramola: la superficie sobre la que descansan las tarjetas */ --papel: #FFFEFC; /* la tarjeta impresa */ --linea: #E4DED6; --margen: #CFC6BA; /* la unica linea que pesa: bordes de lo apagado */ /* ── La tinta ─────────────────────────────────────────────────────────── Negro CALIDO con algo de ciruela, y es el mismo negro del fondo de la maquina: las tres pantallas son la misma cosa mirada con otra luz. */ --tinta: #221B26; --tinta-suave: #6B6270; /* ── La noche: el material de la maquina ──────────────────────────────── Vive en el mismo `:root` que el papel a proposito. Antes esto solo existia dentro de `jukebox.css`, y por eso la maquina se desviaba sin que nadie lo notara. */ --noche: #17101A; --terciopelo: #241A28; --borde: #3A2C40; --realce: #33253A; /* el escalon de material: el terciopelo un punto mas claro */ --nata: #F6EFE9; /* la tinta de la noche */ --humo: #A2909C; --humo-vivo: #C9B8C3; /* el humo subido hasta leerse a cuatro metros */ /* ── DE QUIEN ES LA COSA. Regla 1 ─────────────────────────────────────── El MISMO hexadecimal en la maquina y en el papel: las tres pantallas se ven a la vez en la misma habitacion. */ --ambar: #F2A13B; --ambar-tinta: #8A4A00; /* el mismo color bajado hasta poder leerse: 6,8:1 */ --ambar-suave: #FDF3E6; --ambar-medio: #FBE6C8; /* un paso mas, para lo que va DENTRO de una tarjeta ambar */ /* ── Lo que se acaba, o lo que no tiene vuelta atras ──────────────────── La maquina la redefine mas abajo: sobre negro, #B93415 no se lee. Es el mismo aviso con otra luz, y hasta hoy eso no estaba escrito en ningun sitio. */ --brasa: #B93415; --brasa-suave: #FBEAE5; /* ── Lo que esta pasando y cambia sin que nadie lo toque ──────────────── 6,4:1 sobre papel: al reves que el ambar, este SI se lee como texto. */ --pino: #1D6B45; --pino-papel: #F3F8F4; --valido: var(--pino); /* confirmar y "esto esta en marcha" son la misma idea */ --maquina: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace; --gente: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --radio: 0.75rem; --radio-tecla: 0.7rem; --relieve: 0 1px 2px rgba(34, 27, 38, 0.05), 0 1px 8px rgba(34, 27, 38, 0.04); /* 44 es el minimo de una aplicacion normal. Aqui se pulsa de pie, a media luz y con una copa en la otra mano. No son los 56 de La Barra: alli se pulsa con los guantes de moto puestos delante de una nevera, y eso lo mide su spec, no el gusto. */ --tap: 48px; /* ── EL SUSTRATO DEL QUE SE RECORTA LO PULSABLE ───────────────────────── Es lo que deja que un solo sistema sirva a dos pantallas de papel y a una de noche sin escribir dos veces cada regla. En el papel el lienzo es el papel; en la maquina, el terciopelo. */ --lienzo: var(--papel); --letra: var(--tinta); --foco: var(--tinta); color-scheme: light; /* ── EL COLOR DE LA CASA. Regla 2 ─────────────────────────────────────── Lo redefine cada pantalla en su `data-pantalla`. Lo que hay aqui es el TURQUESA, que es el del movil del invitado — la pantalla que se sirve en la raiz, la que abren doce personas y la unica que podria quedarse sin atributo sin que se notara. --casa la cabecera y el relleno de lo pulsable --casa-hondo el canto de la tecla, y el fondo al pulsarla --casa-tenue el borde de lo pulsable que NO es la accion principal --casa-suave el papel teñido: lo elegido, lo marcado, la casilla con el cursor dentro --casa-letra la letra que se lee ENCIMA de `--casa` cuando esta relleno. Es papel en las dos pantallas de papel y NOCHE en la maquina, porque alli la casa es un violeta claro: papel sobre papel-violeta daria 1,8:1 Los dos colores de casa pasan de 6:1 sobre papel, asi que valen como relleno con letra clara Y como texto sobre papel. Ninguno es ambar (seria decir dos cosas con un color) y ninguno se acerca a la brasa ni al pino. Medidos: turquesa 6,28:1 sobre el papel y 7,26:1 como relleno; violeta 7,35:1 y 8,51:1. */ --casa: #0F5F6B; --casa-hondo: #08424A; --casa-tenue: #A6C8CD; --casa-suave: #E7F1F2; --casa-letra: var(--papel); } /* El panel del anfitrion: violeta. Es la pantalla con poderes de verdad. */ body[data-pantalla="anfitrion"] { --casa: #5B3B8C; --casa-hondo: #3D2560; --casa-tenue: #C4B3DC; --casa-suave: #F0EBF7; } /* La maquina: el mismo violeta con la luz de la noche. Ver la cabecera —aqui el color de la casa contesta UNA sola pregunta, «¿que puedo pulsar?», y la respuesta es siempre «los mandos del anfitrion». */ body[data-pantalla="maquina"] { --casa: #B9A0E8; /* 8,2:1 sobre la noche, en los dos sentidos */ --casa-hondo: #7B5FB0; /* el canto: el violeta un escalon por debajo */ --casa-tenue: #5A4478; --casa-suave: #241B33; --casa-letra: var(--noche); --lienzo: var(--terciopelo); --letra: var(--nata); --foco: var(--nata); /* Las lineas y los grises del sustrato, con la luz de la noche: un borde de #CFC6BA sobre negro no es una linea fina, es un marco encendido. */ --linea: var(--realce); --margen: #4A3A52; --tinta-suave: var(--humo); /* La brasa del papel sobre negro da 2,9:1. Es el mismo aviso, subido hasta leerse: 5,6:1 sobre la noche. */ --brasa: #E0563F; color-scheme: dark; } * { box-sizing: border-box; } /* `hidden` tiene que ganar a cualquier regla de componente que fije display. */ [hidden] { display: none !important; } /* ── LO PULSABLE. Reglas 2 y 3 ──────────────────────────────────────────── Un boton aqui tiene DOS señales, y las dos hacen falta: · el color de la casa, que dice «esto es de las cosas que se tocan»; · el canto inferior grueso y oscuro, que dice «esto sobresale». La segunda es la que de verdad funciona con quien no ha usado nunca una aplicacion, y es la que no habia: hasta hoy lo pulsable de las dos pantallas de papel era TINTA, un rectangulo casi negro. Se veia —eso nunca fue el problema— pero no se notaba que sobresalia, y para quien viene del papel eso es la diferencia entre un boton y un titulo con fondo. Va en el elemento `button` y no en una clase para que lo herede TODO lo que se pulsa, incluido lo que pinta el JavaScript, que es casi todo. Las excepciones se marcan a mano y son dos: `.discreta` (una salida, no una oferta) y `.peligro` (lo que no tiene vuelta atras). */ button { min-height: var(--tap); display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.6rem 1.2rem; border: 2px solid var(--casa-tenue); border-bottom-width: 4px; border-radius: var(--radio-tecla); background: var(--lienzo); color: var(--casa); font: inherit; font-weight: 700; cursor: pointer; transition: transform .06s ease, background-color .12s ease, border-bottom-width .06s ease; } button:hover { background: var(--casa-suave); } /* El hundido: 2 px de canto que se pierden y 2 px que baja el boton. */ button:active { transform: translateY(2px); border-bottom-width: 2px; } /* La accion principal va RELLENA: en una pantalla con cuatro botones, uno solo puede ser el que se pulsa al final. */ button[type="submit"], button.principal { background: var(--casa); border-color: var(--casa-hondo); color: var(--casa-letra); } button[type="submit"]:hover, button.principal:hover { background: var(--casa-hondo); } /* Deshabilitado SE APAGA DEL TODO —gris, sin color de casa y sin canto—. Si sigue pareciendo una tecla, se pulsa, y no pasa nada: eso es peor que no poder pulsarla. Antes esto era `opacity: .45`, que deja un boton del color de la casa, translucido y con toda su pinta de boton. */ button:disabled, button[type="submit"]:disabled, button.principal:disabled { background: var(--linea); border-color: var(--margen); border-bottom-width: 2px; color: var(--tinta-suave); cursor: not-allowed; transform: none; opacity: 1; } /* La salida discreta: quitar una cancion, cerrar un cajon. NO lleva canto —no es una tecla— ni color de casa: no es una accion que se ofrezca, es una que se encuentra cuando se busca. Mantiene la zona pulsable entera. */ button.discreta { min-height: auto; padding: 0; border: 0; background: transparent; color: var(--tinta-suave); font-weight: 400; } button.discreta:hover { background: transparent; color: var(--brasa); } button.discreta:active { transform: none; } /* Lo que no tiene vuelta atras. Perfilado en brasa y NO relleno: se ve, pero no invita. A las tres de la mañana, con una copa, el pulgar se equivoca. */ button.peligro { background: var(--lienzo); color: var(--brasa); border-color: #E2B6A8; } button.peligro:hover { background: var(--brasa-suave); color: var(--brasa); } /* ── Las casillas ───────────────────────────────────────────────────────── Dos pixeles de borde y no uno: una casilla vacia sobre papel del mismo tono no se ve que es una casilla, y quien viene del papel espera un recuadro dibujado, no un cambio de blancos. */ input { min-height: var(--tap); padding: 0.8rem 0.95rem; border: 2px solid var(--margen); border-radius: var(--radio-tecla); background: var(--lienzo); color: var(--letra); font: inherit; } input::placeholder { color: var(--tinta-suave); } /* LA CASILLA EN LA QUE SE ESTA ESCRIBIENDO SE TIÑE del color de la casa: en un formulario de dos campos, saber cual tiene el cursor es la mitad del trabajo, y a media luz el borde solo no se ve. */ input:focus { border-color: var(--casa); background: var(--casa-suave); outline: none; } input:disabled { background: var(--linea); border-color: var(--margen); color: var(--tinta-suave); cursor: not-allowed; opacity: 1; } /* ── Las cifras. Regla 4 ────────────────────────────────────────────────── `tabular-nums` es lo que evita que los numeros bailen al cambiar. */ .cifra { font-family: var(--maquina); font-variant-numeric: tabular-nums; font-weight: 700; letter-spacing: -0.01em; } /* ── Los enlaces de navegacion: PASTILLAS CON BORDE ─────────────────────── Nunca texto con opacidad. A un texto no se le nota que lleva a otro sitio si no has usado nunca una aplicacion; a un contorno, si. Sobre la cabecera teñida van en papel translucido; sueltas sobre el papel, en color de casa. */ .pastilla-nav { display: inline-flex; align-items: center; min-height: 44px; padding: 0 0.85rem; border: 1.5px solid var(--casa-tenue); border-radius: 999px; background: var(--lienzo); color: var(--casa); font: inherit; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; cursor: pointer; } .pastilla-nav:hover { background: var(--casa-suave); } .pastilla-nav:active { transform: translateY(1px); } /* ── La cabecera de la casa ─────────────────────────────────────────────── Va en el COLOR DE LA CASA y no en tinta: es la banda mas grande y mas estable de la pantalla, y es lo primero que se ve al abrirla. Que el movil sea turquesa y el panel violeta contesta «¿donde estoy?» desde el otro lado del salon, sin leer una palabra. Sin tipografia descargada, a proposito: esto se abre en una fiesta que a veces tira de los datos compartidos de un movil. El caracter lo pone el TRATAMIENTO —versales estrechas, muy espaciadas—, no un fichero de 40 KB que puede no llegar. */ .cabecera { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.8rem 1.25rem; background: var(--casa); color: var(--casa-letra); /* El canto oscuro es el mismo recurso que el de las teclas: separa la banda del papel sin una linea que parezca un borde. */ border-bottom: 3px solid var(--casa-hondo); } .cabecera .marca { margin: 0; font-size: 0.95rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--casa-letra); } /* ── El foco se ve SIEMPRE ──────────────────────────────────────────────── Se pulsa con el dedo, pero tambien se navega con teclado desde el portatil que a veces hace de tablet. En la maquina el foco no puede ser tinta: sobre la noche no se veria. */ :where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; } /* Quien pide menos movimiento sigue viendo que ha pulsado: se le quita el desplazamiento, NO el hundido del canto. Sin ninguna de las dos cosas, pulsar deja de confirmar nada. */ @media (prefers-reduced-motion: reduce) { button { transition: none; } button:active { transform: none; } .pastilla-nav:active { transform: none; } }