/** * PIEL MARACAS para la app de reservas. * * La estructura no se toca: sigue siendo la de la app de obras (`tokens.css`, * `reset.css`, `base.css`, `utilities.css` y los componentes de `app.css`). * Esto sólo REDEFINE los 22 tokens de color que usan esos componentes, para * que la herramienta lleve la misma paleta que la web del bar. * * Que baste con cambiar tokens es la prueba de que el sistema estaba bien * puesto: ni una regla de componente se edita aquí. * * Colores tomados literalmente de `theme.json` del tema `maracas`. * * ⚠️ TRES COSAS QUE EN OSCURO NO FUNCIONAN IGUAL Y HAY QUE REHACER, no sólo * recolorear. Están abajo, cada una con su motivo. * * ⚠️ TODO va bajo `html:not([data-contrast="high"])`. `tokens.css` trae un * modo de ALTO CONTRASTE en `[data-contrast="high"]`, que es (0,1,0) — la * misma especificidad que `.qw-app`. Como esta hoja carga después, ganaría y * dejaría el modo de accesibilidad sin efecto, en silencio. Con la guarda, la * piel simplemente se aparta: si alguien enciende alto contraste, manda él. * Hoy nada en esta app pone ese atributo; el día que se conecte, ya funciona. */ html:not( [data-contrast="high"] ) .qw-app { /* ---------------------------------------------------------- superficies En claro la jerarquía la hace la SOMBRA NEGRA sobre blanco. En oscuro una sombra negra no se ve: sobre #0B0710 no hay nada más negro. Así que la elevación se hace al revés — cada nivel es MÁS CLARO que el de debajo — y la sombra pasa a ser apoyo, no protagonista. */ --qw-bg: #0B0710; --qw-surface: #16121F; --qw-surface-elev: #1E1830; --qw-bg-muted: rgba( 255, 255, 255, .055 ); --qw-text: #F7F4FB; /* 16.9:1 sobre la tarjeta */ --qw-text-muted: #A79FB8; /* 7.3:1 sobre la tarjeta */ --qw-text-faint: #A79FB8; /* Los bordes de la casa van teñidos de celeste sobre blanco. Sobre negro un tinte de color se ensucia; un blanco muy bajo lee como filete. */ --qw-border: rgba( 255, 255, 255, .11 ); --qw-border-strong: rgba( 255, 255, 255, .26 ); --qw-line: var( --qw-border ); /* ------------------------------------------------------- acción de marca Los tokens `--qw-green*` NO significan «verde»: significan «la acción principal». En obras eso es el verde Quewood; en Maracas es el amarillo del bar. Se remapea el papel, no el nombre — renombrarlos obligaría a tocar los componentes copiados, que es justo lo que no queremos. */ --qw-green: #FFD400; --qw-green-deep: #FFD400; --qw-green-on: #12121A; /* 13.0:1 sobre el amarillo */ --qw-green-soft: rgba( 255, 212, 0, .15 ); --qw-green-rgb: 255, 212, 0; --qw-green-dark: var( --qw-green-deep ); /* Y `--qw-celeste*` es «el secundario / los enlaces»: aquí, el rosa. */ --qw-celeste: #FF99FF; --qw-celeste-deep: #FF99FF; /* 9.9:1 sobre la tarjeta */ --qw-celeste-soft: rgba( 255, 153, 255, .14 ); --qw-celeste-rgb: 255, 153, 255; --qw-celeste-fill: #FF99FF; --qw-celeste-fill-on: #12121A; --qw-celeste-on: #12121A; /* --------------------------------------------------------------- avisos Los rojos y ámbares de la casa están oscurecidos para cumplir AA SOBRE BLANCO (#b91c1c, #b45309). Sobre negro hacen lo contrario: desaparecen. Se suben hasta que pasan AA sobre la tarjeta. */ --qw-danger: #FF7A7A; --qw-danger-soft: rgba( 255, 122, 122, .15 ); --qw-warning: #FFC061; --qw-warning-soft: rgba( 255, 192, 97, .15 ); --qw-ok: #5BE59A; --qw-scrim: rgba( 6, 4, 10, .62 ); /* Las sombras se hacen más profundas para que aún digan algo sobre un fondo oscuro; el trabajo de separar lo hace la superficie más clara. */ --qw-shadow-sm: 0 2px 8px rgba( 0, 0, 0, .40 ); --qw-shadow-md: 0 6px 18px rgba( 0, 0, 0, .50 ); --qw-shadow-lg: 0 18px 44px rgba( 0, 0, 0, .60 ); --qw-card-shadow: 0 4px 16px rgba( 0, 0, 0, .45 ); } /* ============================================================== TARJETAS 1 · Sobre oscuro la tarjeta necesita FILETE, no sólo sombra. `.qw-card` de utilities.css confía en la sombra negra difuminada para despegarse del blanco. Aquí el fondo ya es casi negro: sin un borde, la tarjeta y la página son la misma mancha. */ .qw-app .qw-card { background: var( --qw-surface ); border: 1px solid var( --qw-border ); } /* ================================================================= CHIPS 2 · Los estados tienen que seguir distinguiéndose ENTRE SÍ. En claro «confirmado» era verde y el botón también; aquí el amarillo pasa a ser la acción, así que si «confirmado» siguiera usando `--qw-green` un chip confirmado y un botón serían del mismo color. Cada estado recupera su tono propio, medido sobre su fondo tenue compuesto sobre la tarjeta. */ html:not( [data-contrast="high"] ) .qw-app .mrcapp-chip--confirmed { background: rgba( 91, 229, 154, .15 ); color: #5BE59A; } /* 8.4:1 */ html:not( [data-contrast="high"] ) .qw-app .mrcapp-chip--pending { background: rgba( 255, 192, 97, .15 ); color: #FFC061; } /* 8.3:1 */ html:not( [data-contrast="high"] ) .qw-app .mrcapp-chip--waitlist { background: rgba( 201, 169, 255, .15 ); color: #C9A9FF; } /* 7.0:1 */ html:not( [data-contrast="high"] ) .qw-app .mrcapp-chip--declined, html:not( [data-contrast="high"] ) .qw-app .mrcapp-chip--cancelled { background: rgba( 255, 122, 122, .15 ); color: #FF7A7A; } /* 5.8:1 */ .qw-app .mrcapp-chip--new { background: rgba( 255, 212, 0, .15 ); color: #FFD400; } /* 9.2:1 */ /* ============================================================== AVISOS Los pinta `assets/css/toast.css` con la paleta de Maracas ya puesta: no hay nada que re-teñir aquí. */ /* El de la página. `reset.css` lo pinta con `--qw-bg`, y ese token en `:root` sigue siendo el blanco de obras: la piel sólo lo remapea dentro de `.qw-app`. Se veía como una franja blanca por encima de la cabecera y detrás de la pantalla de acceso. */ html:not( [data-contrast="high"] ) body { background: #0B0710; } /* ============================================================ ESQUELETOS El brillo iba teñido de celeste sobre gris claro. Sobre oscuro hay que aclarar, no oscurecer. */ html:not( [data-contrast="high"] ) .qw-app .mrcapp-skel { background: linear-gradient( 90deg, rgba( 255, 255, 255, .05 ) 25%, rgba( 255, 255, 255, .13 ) 37%, rgba( 255, 255, 255, .05 ) 63% ); background-size: 400% 100%; } /* ================================================================ DETALLES */ /* El campo de un formulario en oscuro se HUNDE respecto a la tarjeta; en claro flotaba sobre ella. */ html:not( [data-contrast="high"] ) .qw-app .mrcapp-input input, html:not( [data-contrast="high"] ) .qw-app .mrcapp-input select, html:not( [data-contrast="high"] ) .qw-app .mrcapp-input textarea, html:not( [data-contrast="high"] ) .qw-app .mrcapp-field input { background: #0E0B16; border-color: var( --qw-border-strong ); } /* El botón fantasma sobre oscuro: relleno transparente, no blanco. */ .qw-app .mrcapp-btn--ghost { background: transparent; box-shadow: inset 0 0 0 1px var( --qw-border-strong ); } .qw-app .mrcapp-btn--ghost:hover { background: rgba( 255, 255, 255, .06 ); filter: none; } /* La cabecera y la barra usan `color-mix` sobre `--qw-surface`, así que el cristal sale solo oscuro. Sólo hay que reforzar su separación, que en claro la daba una sombra que aquí no se ve. */ .qw-app .mrcapp-header { border-bottom: 1px solid var( --qw-border ); } .qw-app .mrcapp-nav { border-top: 1px solid var( --qw-border ); } /* La hoja, igual: sobre oscuro necesita filete para despegarse del velo. */ .qw-app .mrcapp-sheet, .mrcapp-sheet { background: var( --qw-surface-elev ); border: 1px solid var( --qw-border-strong ); color: var( --qw-text ); } .mrcapp-sheet__actions { background: var( --qw-surface-elev ); } /* ============================================ UN GUIÑO A LA MARCA, UNO El nombre de la app en Anton, la tipografía de los flyers y del sitio. Sólo ahí: una herramienta se lee con una sans neutra, y llenarla de tipografía de cartel la haría más bonita y menos usable. Es la única licencia que se toma esta piel — quitar esta regla la deja en Montserrat. La fuente ya está cargada por el tema en todas las páginas. */ .qw-app .mrcapp-header__title { font-family: 'Anton', var( --qw-font-sans ); font-weight: 400; letter-spacing: .06em; text-transform: uppercase; font-size: var( --qw-fs-xl ); } /* ======================================================= CONTADOR DE PESTAÑA `app.css` pone texto BLANCO sobre `--qw-warning`, y en claro eso valía porque el ámbar de la casa es oscuro (#b45309, blanco a 4.9:1). Aquí el ámbar se ha aclarado para que se lea sobre negro, así que el blanco encima cae a 1.6:1 — la cifra se volvía ilegible justo en la chapa que avisa de que hay trabajo pendiente. Con tinta oscura sube a 11.5:1. */ html:not( [data-contrast="high"] ) .qw-app .mrcapp-tab__count { color: #12121A; }