/* =============================================================================
TEMA CLARO — "Papel y terracota" (2026-09-04)
=============================================================================
QUE ES. La misma web, con otra piel. No hay ni un cambio de HTML, de
plantilla ni de JavaScript: esta hoja se carga DESPUES de todas las demas
y reescribe colores y tipografias.
Lo elige el visitante con el boton de sol y luna de la cabecera, y se
guarda en una cookie de un ano. El tema oscuro sigue siendo el de por
defecto: quien no toca nada, lo ve como siempre. Ver app/tema.php.
AL ANADIR CSS NUEVO. Mientras app.css siga con los colores escritos a
mano, cada regla nueva con fondo o color propio necesita su pareja aqui
— incluidos los :hover, [open] y :checked, que son los que mas se
olvidan porque no se ven en una captura en reposo.
DE DONDE SALE. Del sistema "warm-editorial" de la libreria de estilos
(ux-ui-agent-skills/design-systems/library/warm-editorial). Se eligio ese
y no otro por una razon concreta:
· La fachada de siempre es azul marino y dorado: dice "lujo, de noche,
caro". Funciona, y por eso sigue siendo la de siempre.
· Quintana no vende torres de lujo: vende la casa de una familia, y su
promesa es "explicamos antes de vender". Eso se parece mas a papel de
revista que a un escaparate de joyeria.
Asi que la alternativa es el POLO OPUESTO, no una variacion: papel calido
en vez de noche, terracota en vez de dorado, y silencio en vez de
particulas. Comparar dos cosas parecidas no sirve para decidir.
QUE CAMBIA, EN UNA LINEA CADA COSA:
· Fondo: azul marino #0F1829 -> papel #FAF7F2
· Texto: blanco -> negro calido #1C1A17
· Acento: dorado #F0C15C -> terracota #A8462A
· Segundo: (no habia) -> verde bosque #2F5B4F
· Titulos: Lora (se queda: es una serif de revista y aqui encaja)
· Fondo animado: se apaga. En papel, unas particulas flotando no son
elegantes: son ruido.
· El halo dorado alrededor de las cajas: se apaga. Es un efecto de
pantalla oscura; sobre papel se ve sucio.
CONTRASTES. Medidos de verdad, en el navegador y sobre la pagina ya
pintada, no a ojo. El minimo de WCAG AA es 4.5:1 para texto normal y
3:1 para texto grande y para bordes:
tinta #1C1A17 sobre papel #FAF7F2 ......... 16.25:1
texto 2 #4A443E sobre papel ................ 8.98:1
texto 3 #6B635B sobre papel ................ 5.52:1
terracota #A8462A sobre papel .............. 5.50:1 (enlaces, titulos)
blanco sobre terracota (boton relleno) ..... 5.88:1
bosque #2F5B4F sobre papel ................. 7.20:1
blanco sobre bosque ........................ 7.69:1
Pasada de axe-core sobre esta fachada: sin fallos, salvo la frase gigante
del pie, que es decoracion (lleva aria-hidden) y que el cliente pidio
dejar como esta el 2026-09-04. Es la misma excepcion que en la fachada
de noche.
LO QUE ESTA HOJA NO ES. No es la forma definitiva de tener dos temas.
app.css tiene 171 colores escritos a mano, no en variables; aqui se tapan
uno a uno. Sirve para VER la alternativa y decidir. Si se elige, el paso
siguiente es sacar esos 171 a variables y entonces cada fachada vuelve a
ser lo que deberia: un bloque :root de veinte lineas.
========================================================================== */
:root{
/* Las cuatro "profundidades" del fondo. En la fachada de noche iban de
azul marino a azul medio; aqui van de papel a papel sombreado. */
--navy:#FAF7F2; --navy-8:#FFFFFF; --navy-7:#F2EDE4; --navy-6:#E8E0D3;
/* Los bordes. --line es "esto se toca"; --line-static es estructura. */
--line:#C9BFB0; --line-soft:rgba(28,26,23,.14); --line-static:rgba(28,26,23,.12);
/* El acento. Terracota, no dorado.
OJO CON EL TONO. El sistema editorial trae #C0512F, y sobre este papel
da 4.41:1. Para un titulo grande vale (el minimo es 3:1), pero el mismo
token pinta tambien enlaces de 14 px, y ahi hace falta 4.5:1. Medido con
axe: el lema del pie salia en 4.4 y fallaba por dos centesimas.
Se baja un escalon, a #A8462A: 5.50:1 sobre papel y 5.88:1 con texto
blanco encima (los botones rellenos). Pasa en los dos usos y, al lado
del original, es el mismo color. El sistema dice "no inventes hexes
fuera de la paleta"; esto no es un color nuevo, es su propio tono
oscuro, que la paleta ya traia como secundario. */
--amber:#A8462A; --amber-l:#8E3A22; --amber-d:#7A3018;
/* Los tres tonos de texto. Negro calido, nunca negro puro. */
--ink:#1C1A17; --ink-2:#4A443E; --ink-3:#6B635B;
/* Las dos serif y sans se quedan: Lora es una serif de revista y aqui
esta en su sitio. Lo que cambia es el peso, mas ligero sobre papel. */
--glass:rgba(255,255,255,.86);
/* Sobre papel el rojo tiene que ser OSCURO para leerse, y el borde
puede ser el mismo: aqui no hay que aclararlo como en la noche. */
--rojo:#B3261E; --rojo-borde:#C0392B;
/* El verde bosque del sistema: separadores y etiquetas. No existia en la
fachada de noche, y es lo que le da su aire de revista. */
--bosque:#2F5B4F;
}
/* El fondo animado se apaga. */
#bg{display:none}
body{background:var(--navy);color:var(--ink)}
/* El logo es negro sobre transparente. La fachada de noche lo tiene que
aclarar; sobre papel va tal cual, que es como se diseño. */
.nlogo img,.portal-logo img,.panel-marca img,.fl img{filter:none;opacity:1}
/* ---------------------------------------------------------------------------
SUPERFICIES
---------------------------------------------------------------------------
Aqui esta el grueso del trabajo. En app.css los fondos de las tarjetas van
escritos a mano -rgba(27,42,71,.8) y sus primos-, no en variables, asi que
hay que taparlos uno a uno. Se agrupan por el color que tenian, no por
pantalla: asi se ve de un vistazo que TODA la caja blanca del sitio sale
de esta unica regla.
------------------------------------------------------------------------ */
/* Lo que era rgba(27,42,71,.8/.78/.7) — la tarjeta de siempre. */
.mem,.t,.pcard,.opt,.casa,.alq,.vacio,.resumen,.caja,.cifra,
.panel-filtros,.panel-form,.panel-alta,.ficha-tabs,.tabs,.statmarq{
background:#FFFFFF;border-color:var(--line)}
/* Lo que era rgba(20,31,56,.72) — las cajas grandes de la portada. */
.card-sec{background:#FFFFFF;border-color:var(--line)}
/* Lo que era rgba(15,24,41,.75) — el hueco donde se escribe. */
.f input,.f select,.f textarea,.sel-boton,.sel-mini,.chk-solo,
.doc-acc input[type=text],.rolop,.propfila{
background:#FFFFFF;border-color:var(--line);color:var(--ink)}
/* Lo que era rgba(36,54,92,.55) — las pastillas sueltas. */
.zbody li,.pcard-specs li,.chk,.tab-n{
background:var(--navy-7);color:var(--ink-2)}
/* La barra flotante de arriba. */
.nblock{background:var(--glass);border-color:var(--line);
box-shadow:0 2px 16px rgba(28,26,23,.06)}
.nav.small .nblock{background:rgba(255,255,255,.96)}
/* El cierre de pagina llevaba un degradado de dos azules. Sin degradados:
el sistema editorial los prohibe, y sobre papel se ven sucios. */
.final{background:#FFFFFF;border-color:var(--line)}
/* La lista desplegable propia. */
.sel-lista{background:#FFFFFF;border-color:var(--amber);
box-shadow:0 8px 30px rgba(28,26,23,.14)}
.sel-op{color:var(--ink-2)}
.sel-op.es-foco{background:rgba(168,70,42,.10);color:var(--ink)}
/* El mapa del Peru: la tierra pasa de azul oscuro a papel sombreado. */
.peru .land{fill:#EDE6DA;stroke:rgba(168,70,42,.45)}
.peru .zone{fill:rgba(168,70,42,.14);stroke:var(--amber)}
.peru .zone:hover,.peru .zone.on{fill:rgba(168,70,42,.34)}
.peru .lbl{fill:var(--ink);stroke:#FAF7F2}
/* ---------------------------------------------------------------------------
PROFUNDIDAD
---------------------------------------------------------------------------
El sistema editorial solo admite dos niveles: plano, y levantado al pasar
el cursor. Se apaga el halo dorado -que es un efecto de pantalla oscura- y
las sombras negras de 70 px, que sobre papel manchan.
------------------------------------------------------------------------ */
.card-sec,.statmarq,.mem,.t,.final,.cierres figure,.pcard,.vidbox{
--halo:0 0 0 rgba(0,0,0,0);
box-shadow:0 1px 2px rgba(28,26,23,.04)}
.mem:hover,.pcard:hover,.cierres figure:hover,.casa:hover{
box-shadow:0 2px 16px rgba(28,26,23,.10)}
.shot{box-shadow:0 2px 16px rgba(28,26,23,.12);border-color:var(--line)}
.wafloat,.flota{box-shadow:0 2px 16px rgba(28,26,23,.16)}
/* ---------------------------------------------------------------------------
TIPOGRAFIA
---------------------------------------------------------------------------
Sobre papel el texto necesita menos peso que sobre azul marino: la misma
negrita que en la noche se lee correcta, aqui se lee gritada.
------------------------------------------------------------------------ */
h1,h2,h3,h4{font-weight:600;color:var(--ink)}
h1{letter-spacing:-.02em}
h1 em{color:var(--amber);font-style:italic}
.lead,.sh p{color:var(--ink-2)}
.eyebrow,.stepno{color:var(--bosque)} /* el rotulo, en verde bosque */
/* ---------------------------------------------------------------------------
BOTONES Y ENLACES
------------------------------------------------------------------------ */
.btn-p{background:var(--amber);color:#FFFFFF}
.btn-p:hover{background:var(--amber-l)}
.btn-s{border-color:var(--line);color:var(--ink)}
.btn-s:hover{border-color:var(--amber);color:var(--amber)}
.btn-in{border-color:var(--amber);color:var(--amber);background:transparent}
.btn-in:hover{background:var(--amber);color:#FFFFFF}
.btn-salir{border-color:var(--line);color:var(--ink)}
.btn-salir:hover{background:var(--ink);border-color:var(--ink);color:#FFFFFF}
/* El pulso dorado del boton principal, en terracota y mas discreto. */
@keyframes breathe{
0%,100%{box-shadow:0 0 0 0 rgba(168,70,42,.30),0 1px 3px rgba(28,26,23,.10)}
50% {box-shadow:0 0 0 11px rgba(168,70,42,0),0 1px 3px rgba(28,26,23,.10)}
}
/* Las pestanas del hero y del portal. */
.tab{color:var(--ink-2)}
.tab[aria-selected="true"],.portal-tabs .tab[aria-selected="true"]{
background:var(--amber);color:#FFFFFF}
.nlinks a{color:var(--ink-2)}
.nlinks a:hover,.nlinks a[aria-current="page"]{color:var(--ink)}
.nlinks .ind{background:var(--amber)}
/* El menu del panel. */
.panel-nav a{color:var(--ink-2)}
.panel-nav a:hover{background:rgba(168,70,42,.08);color:var(--ink)}
.panel-nav a[aria-current]{background:var(--amber);color:#FFFFFF}
.panel-nav a[aria-current] .pill-n{background:#FFFFFF;color:var(--amber)}
.ficha-tabs a{color:var(--ink-2)}
.ficha-tabs a:hover{background:rgba(168,70,42,.08);color:var(--ink)}
.ficha-tabs a[aria-current]{background:var(--amber);color:#FFFFFF}
.ficha-tabs a[aria-current] .tab-n{background:#FFFFFF;color:var(--amber)}
/* Los enlaces sueltos que iban en dorado. */
.caja-pie a,.vacio-mini a,.miga a,footer a:hover,.note b,.zhead:hover,
.casa-chev,.zhead .chev{color:var(--amber)}
/* ---------------------------------------------------------------------------
PIE
------------------------------------------------------------------------ */
footer{color:var(--ink-2)}
footer h2{color:var(--bosque)}
.ftag{color:var(--amber)}
.marq{border-color:var(--line-static)}
/* La frase gigante que late: en papel va en tinta muy clara, no en blanco. */
.marq span{color:rgba(28,26,23,.07)}
@keyframes latido{
0%,100%{color:rgba(28,26,23,.06);text-shadow:none}
50% {color:rgba(168,70,42,.22);text-shadow:none}
}
.fredes a{border-color:var(--line);color:var(--ink-2)}
.fredes a:hover{background:var(--amber);border-color:var(--amber);color:#FFFFFF}
/* ---------------------------------------------------------------------------
PIEZAS DE ESTADO
---------------------------------------------------------------------------
Las pastillas de color iban pensadas para fondo oscuro: fondo al 20 % y
letra clara. Sobre papel eso es ilegible, asi que se invierten: fondo
muy claro y letra oscura del mismo tono.
------------------------------------------------------------------------ */
.estado-user-active,.estado-prop-published,.estado-approved,.estado-lead-won{
background:rgba(47,91,79,.12);color:#245045}
.estado-user-pending,.estado-prop-reserved,.estado-pending,.estado-lead-new{
background:rgba(180,120,20,.14);color:#7A5410}
.estado-user-suspended,.estado-rejected,.estado-lead-lost{
background:rgba(179,38,30,.10);color:#8C1D18}
.estado-prop-draft,.estado-prop-archived{
background:rgba(28,26,23,.08);color:var(--ink-2)}
.estado-prop-sold,.estado-lead-contacted,.estado-lead-qualified{
background:rgba(47,91,79,.10);color:#2F5B4F}
.estado-rol-admin{background:rgba(168,70,42,.12);color:#8E3A22}
.estado-rol-editor{background:rgba(47,91,79,.12);color:#245045}
.estado-rol-agent{background:rgba(28,26,23,.08);color:var(--ink-2)}
.estado-rol-client{background:rgba(28,26,23,.06);color:var(--ink-3)}
/* LAS PASTILLAS DE "LO QUE FALTA". Ojo, que aqui hay una trampa: la MISMA
clase (.falta-missing / .falta-pending / .falta-rejected) se usa en dos
sitios con dos estructuras distintas.
· En la cuenta del propietario -> la clase va en el , y quien
pinta es la pastilla de dentro: `.falta-missing .falta-e`.
· En la ficha del panel -> la clase va EN la pastilla:
`.faltaetiq.falta-missing`.
La primera version de este tema pintaba solo `.falta-missing`, asi que
en la cuenta del propietario le ponia el fondo claro al entero y
dejaba la pastilla con su color de la noche encima: texto rosa palido
sobre rosa palido, 1.21:1. axe lo casco.
Se separan los dos casos. */
.falta.falta-missing,.falta.falta-pending,.falta.falta-rejected{
background:none;color:inherit}
.falta{border-bottom-color:rgba(179,38,30,.22)}
.falta-missing .falta-e,.falta-rejected .falta-e,
.faltaetiq.falta-missing,.faltaetiq.falta-rejected{
background:rgba(179,38,30,.12);color:#8C1D18}
.falta-pending .falta-e,.faltaetiq.falta-pending{
background:rgba(180,120,20,.18);color:#7A5410}
.aviso-global,.ficha-alerta,.faltan,.err.on{
background:rgba(179,38,30,.06);border-color:rgba(179,38,30,.45)}
.aviso-global b,.ficha-alerta b{color:#8C1D18}
.aviso-global p,.ficha-alerta p,.err p{color:#6B2119}
.todo-ok{background:rgba(47,91,79,.08);border-color:rgba(47,91,79,.4);color:#245045}
.flash-ok{background:rgba(47,91,79,.08);border-color:#2F5B4F;color:#245045}
.flash-warn{background:rgba(168,70,42,.08);border-color:var(--amber);color:#8E3A22}
.flash-error{background:rgba(179,38,30,.08);border-color:var(--rojo);color:#8C1D18}
.clave-nueva{background:rgba(168,70,42,.06);border-color:var(--amber)}
.clave-nueva p{color:#8E3A22}
.clave-nueva code,.panel-form code{background:var(--navy-7);color:var(--ink)}
.ini,.who-ini{background:rgba(168,70,42,.10);border-color:var(--amber);color:var(--amber)}
.btn-ok{border-color:#2F5B4F;color:#245045}
.btn-no{border-color:var(--rojo);color:#8C1D18}
/* La tarjeta de una casa con documentos pendientes. */
/* .casa-alerta ya no pinta el borde: ver portal.css. */
.cifra-alerta{border-color:rgba(179,38,30,.5)}
.cifra-alerta .cifra-n{color:#8C1D18}
.falta-file span{border-color:var(--line);color:var(--ink-2)}
.falta-file:hover span{border-color:var(--amber);color:var(--amber)}
/* ===========================================================================
LAS CUATRO HOJAS QUE FALTABAN (2026-09-04)
===========================================================================
Se me escaparon en la primera version. El tema claro tapaba app.css,
forms.css, vender.css, portal.css y panel.css — pero NO cuenta.css,
marketplace.css, ficha.css ni blog.css, que tienen sus propios fondos
escritos a mano.
El resultado era el que vio el cliente: cajas gris azuladas flotando
sobre el papel. En la pantalla de ingresar, ademas, el texto de dentro
se quedaba en tinta oscura sobre esa caja oscura: ilegible.
Es exactamente la deuda que ya avisaba la cabecera de este archivo:
mientras los colores de base sigan escritos a mano en cada hoja, cada
hoja nueva hay que taparla a mano. Cuando esos 171 colores pasen a
variables, todo este bloque desaparece.
======================================================================== */
/* ---------------------------------------------------------------------------
INGRESAR / CREAR CUENTA (cuenta.css)
------------------------------------------------------------------------ */
.cuenta-caja{background:#FFFFFF;border-color:var(--line);
box-shadow:0 1px 3px rgba(28,26,23,.06)}
/* Los botones de Google y Microsoft. */
.btn-sso{background:#FFFFFF;border-color:var(--line);color:var(--ink)}
.btn-sso:hover{border-color:var(--amber);background:rgba(168,70,42,.07)}
/* El "o" entre la contrasena y los proveedores. Su fondo TIENE que ser el
mismo que el de la caja, porque su unico trabajo es tapar la raya que
pasa por detras. Si no coinciden, se ve un parche. */
.sso-o span{background:#FFFFFF}
/* La barra de fuerza de la contrasena. Los tonos claros se leian sobre el
azul marino; sobre papel hay que bajarlos. */
.pwf-barra i{background:rgba(28,26,23,.12)}
.pwf[data-nivel="0"] .pwf-barra i.on{background:#C0392B}
.pwf[data-nivel="1"] .pwf-barra i.on{background:#B26A12}
.pwf[data-nivel="2"] .pwf-barra i.on{background:#8A6B14}
.pwf[data-nivel="3"] .pwf-barra i.on{background:#3E7A52}
.pwf[data-nivel="4"] .pwf-barra i.on{background:#2F5B4F}
.pwf[data-nivel="0"] .pwf-texto{color:#8C1D18}
.pwf[data-nivel="1"] .pwf-texto{color:#7A5410}
.pwf[data-nivel="3"] .pwf-texto,
.pwf[data-nivel="4"] .pwf-texto{color:#245045}
/* ---------------------------------------------------------------------------
BUSCADOR DE PROPIEDADES (marketplace.css)
---------------------------------------------------------------------------
Estas eran las "pastillas grises" de la queja: siete cajas azul oscuro
en fila sobre el papel.
------------------------------------------------------------------------ */
.fpill-buscar,
.fpill > summary,
.fbar-plegable > summary,
.nores-form input{
background:#FFFFFF;border-color:var(--line);color:var(--ink)}
.fpill-buscar{color:var(--ink-3)}
.fpill-buscar input{color:var(--ink)}
.fpill-buscar input::placeholder{color:var(--ink-3)}
.fpill[open] > summary{border-color:var(--amber);background:rgba(168,70,42,.09)}
.fpill[data-on] > summary{border-color:var(--amber);color:var(--amber)}
/* El panel que cae de cada pastilla. */
.fpop{background:#FFFFFF;border-color:var(--amber);
box-shadow:0 12px 34px rgba(28,26,23,.16)}
.fradio:hover,.fseg label:hover{background:rgba(168,70,42,.09);color:var(--ink)}
.fseg label:has(input:checked){background:var(--amber);color:#FFFFFF}
/* El recuadro de "no hay nada". */
.nores{background:#FFFFFF;border-color:var(--line)}
/* ---------------------------------------------------------------------------
EL MAPA
---------------------------------------------------------------------------
Leaflet pinta sus teselas encima, pero el hueco de debajo -y los bordes
mientras carga- se veian azul marino. Y el velo de "que no deslumbre de
noche" sobra de dia: sobre papel deja el mapa sucio.
------------------------------------------------------------------------ */
.leaflet-container{background:#E8E0D3}
.leaflet-tile-pane{filter:none}
.leaflet-control-attribution{background:rgba(255,255,255,.86)!important}
.leaflet-popup-content-wrapper,.leaflet-popup-tip{background:#FFFFFF}
.pin-precio{background:rgba(255,255,255,.94);border-color:var(--line);
box-shadow:0 2px 10px rgba(28,26,23,.20)}
.pin:hover .pin-precio,.pin-on .pin-precio{background:var(--amber);
border-color:var(--amber);color:#FFFFFF}
.mapa-vacio{background:rgba(250,247,242,.94);border-color:var(--line)}
#mapa,#mapa-ficha{border-color:var(--line);background:var(--navy-7)}
/* ---------------------------------------------------------------------------
FICHA DE UNA PROPIEDAD (ficha.css)
------------------------------------------------------------------------ */
.specs,.contacto-card{background:#FFFFFF;border-color:var(--line)}
.tagpills li{background:var(--navy-7);color:var(--ink-2)}
.contacto-form input,.contacto-form textarea{
background:#FFFFFF;border-color:var(--line);color:var(--ink)}
/* ---------------------------------------------------------------------------
BLOG (blog.css)
------------------------------------------------------------------------ */
.post-cuerpo code{background:var(--navy-7);color:var(--ink)}
.post-cuerpo blockquote{border-left-color:var(--amber);color:var(--ink)}
.post-portada{border-color:var(--line)}
/* ---------------------------------------------------------------------------
LOS ESTADOS (hover, abierto) — 2026-09-04
---------------------------------------------------------------------------
Un fallo facil de cometer y dificil de ver: se tapa el fondo de .casa y
se da por hecho que ya esta. Pero .casa:hover y .casa[open] traen SU
PROPIO fondo, azul marino, y solo se ven al pasar el cursor o al abrir
la tarjeta. Una captura de la pagina en reposo no los enseña.
Lo caso axe: al abrir una casa, la tarjeta se ponia gris azulada y el
texto -que ya era tinta oscura- quedaba en 2.38:1. Ilegible.
Regla para el futuro: cada vez que se tape un fondo aqui, buscar si ese
mismo selector tiene :hover, [open], :checked o :focus con fondo propio.
------------------------------------------------------------------------ */
.casa:hover,.casa[open]{background:#FDFCFA;border-color:var(--amber)}
.tabla tbody tr:hover{background:rgba(168,70,42,.05)}
.propfila:hover{background:#FDFCFA;border-color:var(--amber)}
.contenido-form .grupo{background:#FFFFFF;border-color:var(--line)}
.contenido-form .vacio pre{background:var(--navy-7);color:var(--amber)}
/* Dos textos sueltos que se quedaron en su tono de la noche: rosa palido y
salmon, pensados para leerse sobre azul marino. Sobre papel dan 1.5:1.
Los encontro un barrido de todas las hojas buscando `color:` claros que
este tema no tapara. */
.doc-nota{color:#8C1D18}
.etiq-oculta{background:rgba(179,38,30,.12);color:#8C1D18}
/* El boton de sol y luna, en papel. Mismo tamano y misma forma; lo unico
que cambia es que el dorado pasa a terracota. */
.tema-btn{border-color:var(--line);color:var(--ink-2)}
.tema-btn:hover{border-color:var(--amber);color:var(--amber);
background:rgba(168,70,42,.09)}
/* ---------------------------------------------------------------------------
EL MODO EDICION (editor.css) — 2026-09-04
---------------------------------------------------------------------------
La quinta hoja que faltaba. Solo la reciben admin y editor, asi que no
salio en las primeras revisiones: un visitante normal no la carga nunca.
La encontro axe al pasar la portada con sesion de administrador.
Sus barras y cajones van a rgba(15,24,41,...) escrito a mano, o sea azul
marino fijo. Sobre papel eso deja los botones con texto oscuro sobre
fondo oscuro. Se pasan a blanco.
------------------------------------------------------------------------ */
.qp-bar,.qp-cajon,.qp-pop{background:rgba(255,255,255,.97);
border-color:var(--line);box-shadow:0 8px 30px rgba(28,26,23,.16)}
.qp-bar-btn{color:var(--ink);border-color:var(--line)}
.qp-bar-btn:hover:not(:disabled){border-color:var(--amber);color:var(--amber)}
.qp-bar-p,.qp-bar-p:hover:not(:disabled){color:#FFFFFF}
.qp-bar-salir{color:var(--ink-3)}
.qp-bar-estado{color:var(--ink-2)}
.qp-bar-estado.qp-ok{color:#245045}
.qp-cajon,.qp-cajon .qp-pista{color:var(--ink)}
.qp-cajon .qp-pista{color:var(--ink-3)}
.qp-sec{background:var(--navy-7);color:var(--ink)}
.qp-sec.qp-encima{border-color:var(--amber);background:rgba(168,70,42,.12)}
.qp-asa,.qp-cajon button{color:var(--ink-3)}
.qp-ed:hover{outline-color:var(--amber);background:rgba(168,70,42,.08)}
.qp-ed.qp-cambiado{outline-color:#2F5B4F;background:rgba(47,91,79,.08)}
.qp-aviso{background:rgba(255,255,255,.97);border-color:var(--line);color:var(--ink)}
.qp-aviso.qp-malo{border-color:var(--rojo);color:#8C1D18}
.t p{color:var(--ink-2)}