/* ═══════════════════════════════════════════════════════════════════════ LAS FICHAS. Ningun color literal fuera de este bloque (GUIA-INTERFAZ §4). Un hex suelto se queda igual cuando alguien cambia de paleta, y NO se nota con la clara -que se parece a lo que habia antes- sino con la oscura, cuando ya esta publicado. La paleta viaja en `data-paleta` sobre el , y la pone el context processor con lo que cada quien eligio en «Mi cuenta». Los selectores van SIN `:root` a proposito: asi se pueden poner sobre cualquier elemento y la muestra de cada paleta se pinta con sus propias fichas, sin repetir un hex en Python ni en la plantilla. 🔑 SEIS paletas, aprobadas por Abner el 22-08-2026. Agregar una es escribir su bloque aca Y nombrarla en `servicios/apariencia.py`: `tests/test_apariencia.py` compara las dos listas y no deja que se separen. Todo bloque tiene que traer las MISMAS fichas que los demas -la prueba tambien lo vigila-: una que falte se hereda de la anterior y nadie lo nota hasta que esta publicado, que fue lo que paso con --velo. Quien no elige nada NO lleva `data-paleta`, y entonces manda el `@media (prefers-color-scheme)` de mas abajo: clara de dia y oscura de noche, que es lo que el sistema hacia antes de que esto existiera. El acento de Liquidacion es CIRUELA en las seis. No podia ser azul-verdoso -es el de Incentivos- ni indigo -el de Ordenes- ni chocar con el verde de exito, el rojo de alerta o el ambar de aviso, que ya significan cosas. Que cada paleta cambiara el acento seria perder de un vistazo en que sistema estas. ═══════════════════════════════════════════════════════════════════════ */ /* ── CLARA: la de siempre. Tambien es el respaldo de `:root`, o sea lo que ve quien sigue al sistema con Windows en claro. ────────────── */ :root, [data-paleta="clara"] { --tinta: #20222c; --tinta-2: #4a4f5e; --tenue: #767c8c; --borde: #dcdde6; --borde-2: #eceef4; --fondo: #f3f3f7; --papel: #ffffff; --piso: #f8f8fb; --realce: #f0f0f6; --acento: #6a3d6e; --acento-tinta: #ffffff; --acento-piso: #f2ecf3; --sobre-acento-tenue: #e8dcea; --exito: #1c7c54; --alerta: #a33a2c; --aviso: #8a6116; --exito-piso: #e7f3ed; --alerta-piso: #fbeae7; --aviso-piso: #fbf1de; --sombra-desliz: rgba(32, 34, 44, 0.16); --sombra: rgba(32, 34, 44, 0.12); /* El velo de la ventanita que pregunta antes de salir. Apaga lo de atras sin taparlo: se tiene que ver que la cuenta sigue ahi. */ --velo: rgba(32, 34, 44, 0.42); color-scheme: light; /* `color-scheme` arregla el FONDO de los controles nativos, no el color con que se marcan: sin `accent-color` los radios y los casilleros salen con el azul del navegador aunque la paleta sea oscura. */ accent-color: #6a3d6e; } /* ── ARENA: clara y calida, papel color hueso. Cansa menos en jornada larga con la ventana abierta, que es como trabaja recepcion. ──── */ [data-paleta="arena"] { --tinta: #2a241d; --tinta-2: #554c40; --tenue: #7e7365; --borde: #e2dacf; --borde-2: #efe9e0; --fondo: #f6f1e8; --papel: #fffdf9; --piso: #faf6ef; --realce: #f1eae0; --acento: #6d3f60; --acento-tinta: #ffffff; --acento-piso: #f3ecf1; --sobre-acento-tenue: #e9dce6; --exito: #1d7550; --alerta: #a1382a; --aviso: #7d5710; --exito-piso: #e8f2ec; --alerta-piso: #fbeae6; --aviso-piso: #f8efd9; --sombra-desliz: rgba(60, 48, 36, 0.16); --sombra: rgba(60, 48, 36, 0.12); --velo: rgba(45, 36, 28, 0.45); color-scheme: light; accent-color: #6d3f60; } /* ── ALTO CONTRASTE: negro sobre blanco puro. Para pantalla con reflejo o vista cansada. El gris `--tenue` va mucho mas oscuro que en las otras a proposito: si el texto secundario se aclarara, esta paleta dejaria de cumplir justo lo que vino a hacer. ─────────────────────────── */ [data-paleta="contraste"] { --tinta: #000000; --tinta-2: #1c1c1c; --tenue: #3c3c3c; --borde: #5f5f5f; --borde-2: #c4c4c4; --fondo: #ffffff; --papel: #ffffff; --piso: #f1f1f1; --realce: #e4e4e4; --acento: #54225a; --acento-tinta: #ffffff; --acento-piso: #efe6f0; --sobre-acento-tenue: #d9c6dc; --exito: #0a5734; --alerta: #8a1c10; --aviso: #5f3e00; --exito-piso: #e2f0e9; --alerta-piso: #fbe5e2; --aviso-piso: #f7eed6; --sombra-desliz: rgba(0, 0, 0, 0.35); --sombra: rgba(0, 0, 0, 0.3); --velo: rgba(0, 0, 0, 0.55); color-scheme: light; accent-color: #54225a; } /* ── OSCURA: gris azulado neutro. Es tambien la que ve quien sigue al sistema con Windows en oscuro; las dos definiciones tienen que decir lo mismo, y por eso el @media de abajo repite estos valores. ──── */ [data-paleta="oscura"] { --tinta: #e7e7ee; --tinta-2: #b4b8c6; --tenue: #878d9d; --borde: #343747; --borde-2: #282b38; --fondo: #16171f; --papel: #1e202a; --piso: #22242f; --realce: #282b38; --acento: #c39bc8; --acento-tinta: #1b1420; --acento-piso: #2a2130; --sobre-acento-tenue: #3d2f44; --exito: #5cc494; --alerta: #e88b7c; --aviso: #d8ac54; --exito-piso: #1a2c25; --alerta-piso: #2f2020; --aviso-piso: #2c2618; --sombra-desliz: rgba(0, 0, 0, 0.5); --sombra: rgba(0, 0, 0, 0.55); --velo: rgba(8, 9, 13, 0.62); color-scheme: dark; accent-color: #c39bc8; } /* ── NOCHE: oscura y calida, marron en vez de azul. Para la oficina de noche, que es cuando el jefe cuadra. ─────────────────────────── */ [data-paleta="noche"] { --tinta: #efe8e0; --tinta-2: #c3b8ac; --tenue: #948a7e; --borde: #3d372f; --borde-2: #2e2925; --fondo: #1a1713; --papel: #23201b; --piso: #282320; --realce: #302a25; --acento: #cfa0c2; --acento-tinta: #201620; --acento-piso: #322630; --sobre-acento-tenue: #453341; --exito: #62c795; --alerta: #ea8f7a; --aviso: #dfb35d; --exito-piso: #1c2c23; --alerta-piso: #32211c; --aviso-piso: #2e2818; --sombra-desliz: rgba(0, 0, 0, 0.5); --sombra: rgba(0, 0, 0, 0.55); --velo: rgba(14, 11, 8, 0.62); color-scheme: dark; accent-color: #cfa0c2; } /* ── PIZARRA: oscura y fria, mas azul que la oscura. Para monitor grande, donde el gris neutro se ve lavado. ────────────────────── */ [data-paleta="pizarra"] { --tinta: #e3e9f2; --tinta-2: #aeb8c9; --tenue: #808b9e; --borde: #2e3949; --borde-2: #232c39; --fondo: #101620; --papel: #18202b; --piso: #1d2531; --realce: #232c3a; --acento: #bfa0d6; --acento-tinta: #171225; --acento-piso: #262034; --sobre-acento-tenue: #3a3049; --exito: #56c48f; --alerta: #ef8b7f; --aviso: #d9ae55; --exito-piso: #16281f; --alerta-piso: #2c1e1e; --aviso-piso: #2a2417; --sombra-desliz: rgba(0, 0, 0, 0.5); --sombra: rgba(0, 0, 0, 0.55); --velo: rgba(6, 10, 16, 0.62); color-scheme: dark; accent-color: #bfa0d6; } /* Quien NO eligio paleta le sigue a su Windows. La condicion es «no tiene `data-paleta`», no «no es la clara»: con seis paletas, preguntar por una sola dejaria a las otras cinco claras pintadas de oscuro cuando el sistema este en modo noche. */ @media (prefers-color-scheme: dark) { :root:not([data-paleta]) { --tinta: #e7e7ee; --tinta-2: #b4b8c6; --tenue: #878d9d; --borde: #343747; --borde-2: #282b38; --fondo: #16171f; --papel: #1e202a; --piso: #22242f; --realce: #282b38; --acento: #c39bc8; --acento-tinta: #1b1420; --acento-piso: #2a2130; --sobre-acento-tenue: #3d2f44; --exito: #5cc494; --alerta: #e88b7c; --aviso: #d8ac54; --exito-piso: #1a2c25; --alerta-piso: #2f2020; --aviso-piso: #2c2618; --sombra-desliz: rgba(0, 0, 0, 0.5); --sombra: rgba(0, 0, 0, 0.55); --velo: rgba(8, 9, 13, 0.62); color-scheme: dark; accent-color: #c39bc8; } } * { box-sizing: border-box; } /* La raiz fija el tamano de los rem: con el escalado de Windows al 125% de la PC de la distribuidora, dejarlos pegados al 16px del navegador se ve enorme. Bajar la escala general es este solo numero. */ html { font-size: 13px; } body { margin: 0; font: 13px/1.5 "IBM Plex Sans", "Segoe UI", system-ui, sans-serif; color: var(--tinta); background: var(--fondo); -webkit-font-smoothing: antialiased; } h1, h2, h3 { font-family: "Archivo", "Segoe UI", system-ui, sans-serif; } h1 { font-size: 1.55rem; font-weight: 600; letter-spacing: -0.015em; margin: 0 0 0.6rem; text-wrap: balance; } h2 { font-size: 1.1rem; font-weight: 600; margin: 0 0 0.6rem; text-wrap: balance; } h3 { font-size: 0.95rem; font-weight: 600; margin: 0 0 0.4rem; } :focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; border-radius: 3px; } @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } } /* El hilo de identidad: 3 px del acento arriba de todo. Es lo que distingue a los tres sistemas de un vistazo (GUIA-INTERFAZ §3). */ body::before { content: ""; display: block; height: 3px; background: var(--acento); } .barra { display: flex; align-items: center; gap: 1.2rem; padding: 0.55rem 1.1rem; background: var(--piso); color: var(--tinta); border-bottom: 1px solid var(--borde-2); } .barra .marca { font-family: "Archivo", "Segoe UI", system-ui, sans-serif; font-weight: 700; font-size: 0.82rem; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; } /* `flex-wrap` NO es opcional: sin el, el destino que no cabe desaparece sin ninguna senal -no hay barra de deslizar ni puntos suspensivos- y queda una seccion del sistema a la que no se puede llegar. */ .barra nav { display: flex; flex-wrap: wrap; gap: 0.1rem; margin-right: auto; } .barra nav a { color: var(--tinta-2); text-decoration: none; font-weight: 500; padding: 0.45rem 0.55rem; border-radius: 6px; white-space: nowrap; } .barra nav a:hover { background: var(--realce); color: var(--tinta); } .barra nav a.aqui { background: var(--acento-piso); color: var(--acento); font-weight: 600; } /* Quien entro, al final de la barra. Es tambien el enlace para salir y para cambiarse el PIN. */ .barra .quien { margin-left: auto; color: var(--tenue); font-size: 0.88rem; } .barra .quien a { color: var(--tenue); text-decoration: none; } .barra .quien a:hover { color: var(--acento); text-decoration: underline; } main { padding: 1.2rem; } /* La pantalla de entrar: una sola cosa que hacer, centrada y angosta. */ .entrar { max-width: 26rem; margin: 2rem auto; } .entrar label { display: block; margin-bottom: 0.2rem; } .entrar input { width: 100%; } .panel { background: var(--papel); border: 1px solid var(--borde); border-radius: 10px; padding: 1rem 1.1rem; margin-bottom: 1rem; } .panel-error { border-left: 4px solid var(--alerta); } table { border-collapse: collapse; width: 100%; } th, td { padding: 0.4rem 0.5rem; border-bottom: 1px solid var(--borde-2); text-align: left; vertical-align: middle; } th { font-family: "Archivo", "Segoe UI", system-ui, sans-serif; font-weight: 600; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tenue); border-bottom-color: var(--borde); } /* El dinero en mono y con cifras de ancho fijo: en una columna de montos es la diferencia entre leer y contar digitos. */ td.num, th.num { text-align: right; font-family: "IBM Plex Mono", "Consolas", monospace; font-variant-numeric: tabular-nums; white-space: nowrap; } th.num { font-family: "Archivo", "Segoe UI", system-ui, sans-serif; } tbody tr:hover > td, tbody tr:hover > th { background: var(--realce); } tfoot th, tfoot td { border-top: 2px solid var(--borde); border-bottom: 0; background: var(--piso); font-weight: 600; color: var(--tinta); font-size: 0.92rem; text-transform: none; letter-spacing: 0; } tfoot .num { font-family: "IBM Plex Mono", "Consolas", monospace; } /* La aclaracion que acompana a un numero sin competirle: por ejemplo "de 6 - bodega no mando 2" debajo de lo que el cliente recibio. */ .tenue { display: block; font-size: 0.8rem; color: var(--tenue); font-family: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif; font-weight: 400; letter-spacing: 0; text-transform: none; } /* `.tenue` va en `block` para que la aclaracion caiga DEBAJO del dato. En una celda eso rompe la tabla: un `` en block se sale de la fila y la columna entera queda corrida respecto de las demas. Se veia en la lista de la planilla, con "En la liquidacion" e "Ingreso" desalineadas. */ td.tenue, th.tenue { display: table-cell; } input, select, textarea { font: inherit; padding: 0.4rem 0.5rem; border: 1px solid var(--borde); border-radius: 6px; background: var(--papel); color: var(--tinta); } input:hover, select:hover, textarea:hover { border-color: var(--tinta-2); } input.num { text-align: right; width: 6rem; font-family: "IBM Plex Mono", "Consolas", monospace; font-variant-numeric: tabular-nums; } /* El boton de un input de archivo se dibuja con el gris del navegador por mucho que el input tenga estilo: es un pseudo-elemento propio. */ input[type="file"] { padding: 0.3rem; } input[type="file"]::file-selector-button { font: inherit; font-weight: 600; cursor: pointer; margin-right: 0.6rem; padding: 0.35rem 0.7rem; border-radius: 5px; border: 1px solid var(--acento); background: var(--papel); color: var(--acento); } .boton { display: inline-flex; align-items: center; justify-content: center; font: inherit; font-weight: 600; padding: 0.45rem 0.9rem; min-height: 2.2rem; border: 1px solid var(--acento); border-radius: 6px; background: var(--acento); color: var(--acento-tinta); text-decoration: none; cursor: pointer; } .boton:hover { filter: brightness(1.08); } .boton-tenue { background: var(--papel); color: var(--acento); } .boton-tenue:hover { background: var(--acento-piso); filter: none; } /* Un boton apagado tiene que verse apagado. Sin regla propia queda con el color de `.boton` -el mismo fondo del acento, el mismo texto- y la persona lo toca y no pasa nada, sin ninguna explicacion. Se veia en «Dar el dia por cuadrado» con rutas sin cerrar. */ .boton[disabled], .boton:disabled { background: var(--realce); color: var(--tenue); border-color: var(--borde); cursor: not-allowed; filter: none; opacity: 1; } .boton-peligro { background: var(--papel); color: var(--alerta); border-color: var(--alerta); } .boton-peligro:hover { background: var(--alerta-piso); filter: none; } /* ── Las DOS opciones de deshacer una venta ────────────────────────── Eliminar y Nota de credito, una al lado de la otra en PC y una debajo de la otra en telefono. Cuando el documento es credito fiscal, la de Eliminar va APAGADA y no escondida: quien mira la pantalla tiene que ver que existe y que no se puede, sin leer un aviso (Abner, 24-08). */ .dos-opciones { display: grid; gap: 0.8rem; grid-template-columns: 1fr 1fr; } /* 🔑 SE LLAMABA `.opcion` Y ESE NOMBRE YA ESTABA TOMADO. Mas abajo, en el buscador de producto, `.opcion` es un renglon de la lista y pide `display: grid` de cuatro columnas. Misma especificidad, asi que mandaba el orden: la rejilla del buscador se le imponia a este panel y en 390 px dejaba el titulo partido en una columna de una palabra de ancho. En PC no se notaba, porque en 645 px la rejilla todavia entra. La vigila `test_ninguna_clase_declara_dos_display_distintos`. */ .una-opcion { border: 1px solid var(--borde); border-radius: 9px; padding: 0.85rem; background: var(--piso); display: flex; flex-direction: column; gap: 0.55rem; } .una-opcion h3 { margin: 0; font-size: 0.98rem; } .una-opcion .tenue { flex: 1; margin: 0; } .una-opcion .aviso { margin: 0; } /* Punteada y sin relieve: se lee «desactivada» antes de leer el texto. */ .una-opcion-apagada { background: var(--realce); border-style: dashed; } .una-opcion-apagada h3 { color: var(--tenue); } /* Un , no un