/* ========================================================================== TEMAS — un solo sistema para las dos caras del producto. ========================================================================== Un tema define tres cosas y nada más: 1. La base — fondo y tres superficies, en dos juegos: -v (vitrina, la app de clientes) y -c (consola). 2. El metal — tres paradas de un degradado. Es el acento. 3. Los estados — los cuatro, AJUSTADOS a ese fondo. Cada tema los suyos. Por qué dos juegos de base: la consola se usa muchas veces al día y su valor está en que los estados salten. Si el fondo se vuelve vino o verde, se pierden. Así que la consola toma del tema la tipografía, el metal, los iconos y el grano, pero mantiene su base neutra: el equivalente desaturado. Se aplica poniendo atributos en : data-tema onix | platino | jade | borgona | medianoche data-modo dark | light data-cara clientes | consola data-tipo signature | grotesca | tecnica | editorial data-den comodo | compacto data-esq redondo | suave | recto data-metal sutil | medio | marcado data-grano si | no data-mov completo | reducido | ninguno data-icono caja | circulo | limpio ========================================================================== */ /* -------------------------------------------------------------------------- 1. ÓNIX & ORO — negro mate, oro cepillado. El de fábrica. -------------------------------------------------------------------------- */ [data-tema="onix"][data-modo="dark"] { --bg-v:#06060A; --s1-v:#0E0E13; --s2-v:#15151C; --s3-v:#1E1E26; --bg-c:#07070A; --s1-c:#0F0F12; --s2-c:#16161A; --s3-c:#1F1F25; --ln:rgba(201,162,39,.15); --ln2:rgba(201,162,39,.30); --tx:#F7F4EC; --tn:#9C958A; --sd:#6A655C; --m1:#F6E7B4; --m2:#C9A227; --m3:#8A6B14; --metal-tx:#0A0905; --brillo:233,203,110; --tinte:#C9A227; --on-rgb:62,213,152; --off-rgb:255,110,102; --warn-rgb:255,159,28; --info-rgb:110,168,255; } [data-tema="onix"][data-modo="light"] { --bg-v:#F5F2EA; --s1-v:#FFFFFF; --s2-v:#FBF8F0; --s3-v:#F1ECDF; --bg-c:#F4F4F2; --s1-c:#FFFFFF; --s2-c:#FAFAF8; --s3-c:#EFEFEC; --ln:rgba(138,107,20,.17); --ln2:rgba(138,107,20,.32); --tx:#13110B; --tn:#4A4335; --sd:#6B6353; --m1:#E0C169; --m2:#A8801F; --m3:#6E520E; --metal-tx:#FFF9E8; --brillo:168,128,31; --tinte:#A8801F; --on-rgb:0,103,65; --off-rgb:176,27,23; --warn-rgb:126,78,0; --info-rgb:20,82,190; } /* -------------------------------------------------------------------------- 2. PLATINO — negro puro, plata fría. El más sobrio. -------------------------------------------------------------------------- */ [data-tema="platino"][data-modo="dark"] { --bg-v:#000000; --s1-v:#0E1013; --s2-v:#15181C; --s3-v:#1E2228; --bg-c:#0A0B0D; --s1-c:#0F1113; --s2-c:#16191C; --s3-c:#1F2328; --ln:rgba(255,255,255,.09); --ln2:rgba(255,255,255,.19); --tx:#F3F5F7; --tn:#98A0A8; --sd:#666D75; --m1:#FFFFFF; --m2:#C9CFD6; --m3:#7A828C; --metal-tx:#0A0C0E; --brillo:255,255,255; --tinte:#9FB0C0; --on-rgb:62,213,152; --off-rgb:244,100,95; --warn-rgb:245,178,61; --info-rgb:91,157,255; } [data-tema="platino"][data-modo="light"] { --bg-v:#F1F2F0; --s1-v:#FFFFFF; --s2-v:#FAFAF9; --s3-v:#EDEEEC; --bg-c:#F3F4F2; --s1-c:#FFFFFF; --s2-c:#FAFAF9; --s3-c:#EEEFED; --ln:rgba(12,14,18,.10); --ln2:rgba(12,14,18,.21); --tx:#0E1013; --tn:#414850; --sd:#61686F; --m1:#8C949E; --m2:#5C646E; --m3:#3A424C; --metal-tx:#FFFFFF; --brillo:70,80,92; --tinte:#7F8A96; --on-rgb:0,103,65; --off-rgb:176,27,23; --warn-rgb:124,77,0; --info-rgb:22,84,192; } /* -------------------------------------------------------------------------- 3. JADE & LATÓN — verde profundo, latón. Club privado. -------------------------------------------------------------------------- */ [data-tema="jade"][data-modo="dark"] { --bg-v:#040F0C; --s1-v:#08170F; --s2-v:#0D2018; --s3-v:#132A20; --bg-c:#070A09; --s1-c:#0E1211; --s2-c:#151A18; --s3-c:#1D2320; --ln:rgba(176,141,87,.18); --ln2:rgba(176,141,87,.34); --tx:#F1F5F0; --tn:#93A399; --sd:#647468; --m1:#F0DBB4; --m2:#B08D57; --m3:#795D31; --metal-tx:#0A0805; --brillo:224,199,150; --tinte:#7FA98C; /* el verde de "encendido" se aparta del verde del fondo subiendo el brillo */ --on-rgb:94,236,182; --off-rgb:255,112,104; --warn-rgb:250,186,70; --info-rgb:112,174,255; } [data-tema="jade"][data-modo="light"] { --bg-v:#EEF3EF; --s1-v:#FFFFFF; --s2-v:#F7FBF8; --s3-v:#E7EFE9; --bg-c:#F2F3F2; --s1-c:#FFFFFF; --s2-c:#FAFAF9; --s3-c:#EEEFEE; --ln:rgba(121,93,49,.17); --ln2:rgba(121,93,49,.32); --tx:#0B1410; --tn:#3E4A42; --sd:#5E6B62; --m1:#C9A874; --m2:#8A6B39; --m3:#5C451F; --metal-tx:#FFFDF6; --brillo:138,107,57; --tinte:#5E8C72; --on-rgb:0,103,65; --off-rgb:176,27,23; --warn-rgb:126,78,0; --info-rgb:20,82,190; } /* -------------------------------------------------------------------------- 4. BORGOÑA & COBRE — vino oscuro, cobre. Cuero y whisky. -------------------------------------------------------------------------- */ [data-tema="borgona"][data-modo="dark"] { --bg-v:#0C0507; --s1-v:#150809; --s2-v:#1D0C0E; --s3-v:#261214; --bg-c:#0A0708; --s1-c:#121011; --s2-c:#191617; --s3-c:#221E1F; --ln:rgba(200,121,65,.18); --ln2:rgba(200,121,65,.34); --tx:#F7F1EE; --tn:#A59289; --sd:#73635C; --m1:#F6CFAC; --m2:#C87941; --m3:#8A4E24; --metal-tx:#0C0603; --brillo:235,180,132; --tinte:#C07A55; /* el rojo de "urgente" sube de brillo para no fundirse con la base vino */ --on-rgb:70,221,158; --off-rgb:255,128,118; --warn-rgb:250,186,70; --info-rgb:118,176,255; } [data-tema="borgona"][data-modo="light"] { --bg-v:#F7F0ED; --s1-v:#FFFFFF; --s2-v:#FCF6F3; --s3-v:#F1E6E0; --bg-c:#F4F3F2; --s1-c:#FFFFFF; --s2-c:#FAF9F8; --s3-c:#EFEEED; --ln:rgba(138,78,36,.17); --ln2:rgba(138,78,36,.32); --tx:#170B08; --tn:#50423C; --sd:#6E5F58; --m1:#DFA271; --m2:#A85D2C; --m3:#713C16; --metal-tx:#FFF8F3; --brillo:168,93,44; --tinte:#A8613A; --on-rgb:0,102,64; --off-rgb:172,25,21; --warn-rgb:124,77,0; --info-rgb:20,80,188; } /* -------------------------------------------------------------------------- 5. MEDIANOCHE & ACERO — azul noche, acero. El más fintech. -------------------------------------------------------------------------- */ [data-tema="medianoche"][data-modo="dark"] { --bg-v:#03060D; --s1-v:#080E17; --s2-v:#0D1520; --s3-v:#141E2B; --bg-c:#05070A; --s1-c:#0D1013; --s2-c:#14181D; --s3-c:#1C2128; --ln:rgba(157,180,208,.14); --ln2:rgba(157,180,208,.28); --tx:#EEF3FA; --tn:#909DAE; --sd:#606D7E; --m1:#F0F6FF; --m2:#9DB4D0; --m3:#5E7490; --metal-tx:#05090F; --brillo:200,220,245; --tinte:#7E9BC4; /* el azul informativo se va a cian para no confundirse con el acero */ --on-rgb:62,213,152; --off-rgb:255,112,104; --warn-rgb:250,186,70; --info-rgb:86,196,255; } [data-tema="medianoche"][data-modo="light"] { --bg-v:#EDF1F6; --s1-v:#FFFFFF; --s2-v:#F8FAFD; --s3-v:#E6ECF3; --bg-c:#F1F2F4; --s1-c:#FFFFFF; --s2-c:#FAFAFB; --s3-c:#EDEEF0; --ln:rgba(30,50,80,.12); --ln2:rgba(30,50,80,.25); --tx:#0A1018; --tn:#3D4757; --sd:#5C6675; --m1:#8FA6C4; --m2:#5A7093; --m3:#38465C; --metal-tx:#FFFFFF; --brillo:60,80,110; --tinte:#6B87AD; --on-rgb:0,103,65; --off-rgb:174,26,22; --warn-rgb:124,77,0; --info-rgb:12,86,196; } /* ========================================================================== LO QUE SE DERIVA — igual para todos los temas ========================================================================== */ [data-cara="clientes"] { --bg:var(--bg-v); --s1:var(--s1-v); --s2:var(--s2-v); --s3:var(--s3-v); } [data-cara="consola"] { --bg:var(--bg-c); --s1:var(--s1-c); --s2:var(--s2-c); --s3:var(--s3-c); } :root { --on:rgb(var(--on-rgb)); --off:rgb(var(--off-rgb)); --warn:rgb(var(--warn-rgb)); --info:rgb(var(--info-rgb)); --metal:linear-gradient(180deg,var(--m1),var(--m2) 46%,var(--m3)); --metal-h:linear-gradient(100deg,var(--m3),var(--m2) 40%,var(--m1) 70%,var(--m2)); --filo:linear-gradient(180deg,rgba(var(--brillo),var(--filo-a)),rgba(var(--brillo),.02) 55%); --som:0 20px 44px -24px rgba(0,0,0,.75), 0 0 0 1px var(--ln); --glow:0 0 30px -10px rgba(var(--brillo),var(--glow-a)); } /* --- intensidad del metal: no cambia el color, cambia cuánto se nota --- */ [data-metal="sutil"] { --filo-a:.22; --glow-a:0; --metal-op:.55; } [data-metal="medio"] { --filo-a:.40; --glow-a:.28; --metal-op:.80; } [data-metal="marcado"] { --filo-a:.62; --glow-a:.55; --metal-op:1; } /* --- densidad --- */ [data-den="comodo"] { --pad:16px; --gap:12px; --alto:46px; --esc:1; } [data-den="compacto"] { --pad:12px; --gap:8px; --alto:40px; --esc:.92; } /* --- esquinas --- */ [data-esq="redondo"] { --r1:22px; --r2:16px; --r3:12px; --r4:99px; } [data-esq="suave"] { --r1:14px; --r2:11px; --r3:9px; --r4:10px; } [data-esq="recto"] { --r1:4px; --r2:3px; --r3:2px; --r4:2px; } /* --- grano --- */ [data-grano="si"] { --grano-op:.45; } [data-grano="no"] { --grano-op:0; } /* --- forma del icono --- */ [data-icono="caja"] { --ib-r:var(--r3); --ib-bg:var(--s3); --ib-ln:1px; } [data-icono="circulo"] { --ib-r:50%; --ib-bg:var(--s3); --ib-ln:1px; } [data-icono="limpio"] { --ib-r:0; --ib-bg:transparent; --ib-ln:0px; } /* --- tipografías: parejas cerradas (display + texto + cifras) --- */ [data-tipo="signature"] { --f-d:'Playfair Display',Georgia,serif; --f-t:'Instrument Sans',system-ui,sans-serif; --f-n:'JetBrains Mono',monospace; --d-w:700; --d-ls:-.02em; --d-esc:1; } [data-tipo="grotesca"] { --f-d:'Bricolage Grotesque',system-ui,sans-serif; --f-t:'Instrument Sans',system-ui,sans-serif; --f-n:'JetBrains Mono',monospace; --d-w:800; --d-ls:-.042em; --d-esc:1; } [data-tipo="tecnica"] { --f-d:'Sora',system-ui,sans-serif; --f-t:'Inter',system-ui,sans-serif; --f-n:'IBM Plex Mono',monospace; --d-w:700; --d-ls:-.035em; --d-esc:.96; } [data-tipo="editorial"] { --f-d:'Fraunces',Georgia,serif; --f-t:'Manrope',system-ui,sans-serif; --f-n:'Space Mono',monospace; --d-w:700; --d-ls:-.025em; --d-esc:.98; } /* --- movimiento: la preferencia del sistema siempre gana --- */ [data-mov="ninguno"] *, [data-mov="ninguno"] *::before, [data-mov="ninguno"] *::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; } [data-mov="reducido"] * { animation-duration:.001ms !important; animation-iteration-count:1 !important; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; } } /* ========================================================================== PIEZAS COMPARTIDAS — las usan las dos caras ========================================================================== */ /* filo metálico: el borde que brilla. Máscara, no borde: no ocupa sitio. */ .filo { position:absolute; inset:0; border-radius:inherit; padding:1px; pointer-events:none; background:var(--filo); opacity:var(--metal-op); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; } /* grano: va sobre las imágenes y sobre el carné */ .grano { position:absolute; inset:0; pointer-events:none; opacity:var(--grano-op); mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='110' height='110'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='110' height='110' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E"); } /* tratamiento de imagen: el mismo para cualquier foto que suba el líder */ .trat-img { position:absolute; inset:0; background-size:cover; background-position:center; filter:saturate(.5) contrast(1.12) brightness(.88); } .trat-tinte { position:absolute; inset:0; background:var(--tinte); mix-blend-mode:color; opacity:.42; } .trat-scrim { position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.06) 0%,rgba(0,0,0,.5) 48%,rgba(0,0,0,.92) 100%), radial-gradient(118% 80% at 74% 12%,transparent 28%,rgba(0,0,0,.6) 100%); } /* texto recortado sobre el metal: para cifras y logotipo */ .metal-tx { background:var(--metal); -webkit-background-clip:text; background-clip:text; color:transparent; } /* caja de icono */ .ib { width:38px; height:38px; border-radius:var(--ib-r); flex-shrink:0; display:grid; place-items:center; position:relative; background:var(--ib-bg); border:var(--ib-ln) solid var(--ln); overflow:hidden; color:var(--tx); } .ib::before { content:""; position:absolute; inset:0; background:var(--filo); opacity:calc(var(--metal-op) * .3); } .ib svg { position:relative; stroke-width:2.2; } .ib.metal svg { stroke:url(#gMetal); } /* estados: el color solo aquí, y siempre con palabra */ .est { display:inline-flex; align-items:center; gap:6px; height:24px; padding:0 10px; border-radius:var(--r4); font-family:var(--f-n); font-weight:700; font-size:9px; letter-spacing:.12em; text-transform:uppercase; flex-shrink:0; } .est::before { content:""; width:5px; height:5px; border-radius:50%; background:currentColor; flex-shrink:0; } .est.sol { background:var(--metal); color:var(--metal-tx); } .est.lin { border:1px solid var(--ln2); color:var(--tn); } .est.lin::before { animation:lat 1.8s ease-in-out infinite; } .est.apag { background:var(--s3); color:var(--sd); } /* Vencido lleva punto rojo aunque el resto sea monocromo: un cliente que no nota que venció, no renueva. Es venta, no decoración. */ .est.venc { background:rgba(var(--off-rgb),.12); color:var(--off); } .est.on { background:rgba(var(--on-rgb),.13); color:var(--on); } .est.warn { background:rgba(var(--warn-rgb),.13);color:var(--warn); } .est.info { background:rgba(var(--info-rgb),.13);color:var(--info); } @keyframes lat { 0%,100%{opacity:1} 50%{opacity:.25} }