/* ══════════════════════════════════════════════════════════════════════════ cd-superficies.css — FASE 2 · LOS PLANOS SE SEPARAN DEL FONDO ────────────────────────────────────────────────────────────────────────── La fase 1 definió los materiales. Esta los pone en las superficies reales. EL PROBLEMA QUE RESUELVE Fondo y tarjeta se diferenciaban en 4 puntos de luminancia sobre 255. Con esa distancia el ojo no separa planos: lee una pared plana y lo llama "desteñido", aunque el color esté bien saturado. Aquí las tarjetas suben al escalón "plano" y lo que se levanta (menús, modales) al escalón "relieve". Además unifica lo que estaba disperso: ocho radios distintos pasan a tres, y las sombras negras —que apagaban el tono violáceo del fondo— pasan a sombras con violeta dentro. Se aplica por CLASES YA EXISTENTES, sin tocar el marcado. Lo que no encaje en ninguna se queda como está: es preferible a barrer con selectores universales y romper cosas que no se ven en la auditoría. ══════════════════════════════════════════════════════════════════════════ */ /* ── El fondo deja de ser liso ───────────────────────────────────────────── Un degradado muy suave entre los dos tonos de fondo. No se ve como degradado: se nota como que la pantalla tiene arriba y abajo. */ body{ background-color:var(--n-fondo,#0b0b12); background-image: radial-gradient(1200px 620px at 50% -12%, var(--n-fondo-alto,#121220) 0%, transparent 62%); background-attachment:fixed; } /* ══ PLANO 1 · TARJETAS Y PANELES ══════════════════════════════════════════ */ .cdl-card,.card,.cd-card,.panel,.pf-card,.rg-card,.gi-card,.snd-card,.dp-card,.sec-card,.stat,.kpi,.tile{ background-image:linear-gradient(180deg,var(--n-plano-alto,#1d1d33),var(--n-plano,#17172a)) !important; border:1px solid var(--n-filo,rgba(255,255,255,.075)); border-radius:var(--r-md,14px); box-shadow:var(--n-sombra-2,0 4px 14px -4px rgba(14,8,32,.55)); } /* El filo superior: una línea de luz de un píxel en el canto de arriba. Es lo que hace que una tarjeta parezca tener grosor en vez de estar pintada. */ .cdl-card,.card,.cd-card,.panel,.pf-card{ position:relative; } /* .cdl-card queda fuera: cd-cdl-art.css ya le pone su propio ::after. */ .card::after,.cd-card::after,.panel::after,.pf-card::after{ content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none; box-shadow:inset 0 1px 0 0 rgba(255,255,255,.055); } /* La tarjeta de acceso se define en css/cd-cdl.css, ya con estos materiales: tiene reglas propias ahí y duplicarlas aquí solo crea dos sitios donde mirar cuando algo no cuadra. */ /* ══ PLANO 2 · LO QUE SE LEVANTA ═══════════════════════════════════════════ Modales, hojas y menús. Van más altos y con sombra más larga: la distancia al fondo es lo que dice "esto está por encima". */ .modal,.gal-drawer,.pro-panel,.ov-panel,.sheet,.drawer{ background-image:linear-gradient(180deg,var(--n-relieve,#23233c),var(--n-plano,#17172a)) !important; border:1px solid var(--n-filo-vivo,rgba(255,255,255,.14)); border-radius:var(--r-lg,20px); box-shadow:var(--n-sombra-4,0 24px 60px -18px rgba(14,8,32,.7)); } /* ══ CONTROLES ═════════════════════════════════════════════════════════════ */ input,textarea,select,.field,.input{ background-color:var(--n-fondo-alto,#121220); border:1px solid var(--n-filo,rgba(255,255,255,.075)); border-radius:var(--r-sm,8px); color:var(--n-tinta,#f2f2f8); transition:border-color var(--m-rapido,.01ms), box-shadow var(--m-rapido,.01ms); } input:focus,textarea:focus,select:focus,.field:focus,.input:focus{ outline:none; /* Oro = acción/foco. Mantiene el mismo contrato en las páginas compartidas y evita que unas usen violeta y otras oro según el orden de las hojas. */ border-color:rgba(245,200,66,.55); box-shadow:0 0 0 3px rgba(245,200,66,.13); } input::placeholder,textarea::placeholder{color:var(--n-tinta-baja,#7a7a96)} /* ══ TINTA ═════════════════════════════════════════════════════════════════ El texto de apoyo estaba en #8888aa: 5.7:1 sobre el fondo, justo en el límite y con sensación de apagado. Sube a var(--n-tinta-med,#b6b6d0) (9.4:1). */ .cdl-sub,.sub,.muted,.tx2,small.hint,.hint{color:var(--n-tinta-med,#b6b6d0)} /* ══ PÍLDORAS Y SELLOS ═════════════════════════════════════════════════════ */ .chip,.pill,.badge,.tag,.beta-chip,.cd-pro{border-radius:var(--r-full,999px)} /* ══ EL ORO MANDA ══════════════════════════════════════════════════════════ Medido: el oro pintaba 1.631 píxeles frente a 4.088 del violeta. El color de la marca era minoría en su propia portada. No se trata de meter más oro en todas partes —eso lo convertiría en ruido— sino de que el elemento que manda en cada pantalla sea el dorado, y solo ese. Aquí se le da cuerpo al que ya manda: la cifra grande. */ .cd-hero-num,.dash-cifra,.wl-balance-num,.big-number{ color:var(--n-oro-claro,#ffe9a8); text-shadow:0 0 34px rgba(245,200,66,.35); font-size:var(--t-hero,54px); line-height:1; letter-spacing:-.02em; } /* ══ SEPARADORES ═══════════════════════════════════════════════════════════ Las líneas iban en gris plano. Un degradado que se apaga en los extremos no corta la composición: la respira. */ hr,.sep,.divider,.cdm-sep{ border:0;height:1px; background:linear-gradient(90deg,transparent,var(--n-filo-vivo,rgba(255,255,255,.14)) 18%,var(--n-filo-vivo,rgba(255,255,255,.14)) 82%,transparent); } /* ══ LO QUE NO DEBE HEREDAR NADA ═══════════════════════════════════════════ Las superposiciones de OBS necesitan el lienzo transparente: cualquier fondo aquí taparía el vídeo del creador. */ html:has(#lienzo) body{background:transparent !important} @media (prefers-reduced-motion:reduce){ input,textarea,select{transition:none} } /* ══ FASE 4 · EL ORO RECUPERA EL MANDO ═════════════════════════════════════ Medido en la primera pantalla: el oro pintaba 1.631 píxeles frente a 4.088 del violeta. El color de la marca era minoría en su propia portada. La corrección NO es meter oro en todas partes —eso lo convertiría en ruido y dejaría de ser acento—. Es dárselo al elemento que MANDA en cada pantalla, y quitárselo a los que solo acompañan. */ /* El sello de beta se queda EN VERDE, no en oro. Lo probé en oro y era peor: quedaba pegado al botón principal, que también es dorado, y los dos competían por el mismo foco. Con un solo elemento dorado por pantalla, el verde del sello además aprovecha una convención que ya se entiende sin leer (verde = libre, sin coste). */ /* El titular de acceso: el elemento que manda en la primera pantalla. Un degradado corto de oro claro a oro, no un relleno plano — el metal tiene variación, la pintura no. */ /* El titular de acceso se define en css/cd-cdl.css, ya con estos materiales. */ /* El botón principal recupera el oro macizo: es la acción que se espera. */ #view-landing .cdl-go,#view-landing .cdl-primary{ background:linear-gradient(135deg,var(--n-oro-claro,#ffe9a8),var(--n-oro,#f5c842)) !important; color:#2b1f02 !important;font-weight:700; box-shadow:var(--n-sombra-2,0 4px 14px -4px rgba(14,8,32,.55)), var(--n-brillo-oro,0 0 22px -6px rgba(245,200,66,.5)); } /* Los acentos violetas que solo acompañan bajan de intensidad: el violeta pasa a ser el color del ambiente, no el del mensaje. */ #view-landing .cdl-card{ box-shadow:var(--n-sombra-4,0 24px 60px -18px rgba(14,8,32,.7)), 0 0 26px -10px rgba(157,107,255,.30); } /* ══ FASE 5 · ESCALA: LO QUE SE PUDO Y LO QUE NO ═══════════════════════════ El barrido página a página encontró valores fuera de escala repartidos por todo el proyecto (tamaños 9/10/12/14, radios 3/7/9/10/11/12/13/16/18). INTENTÉ normalizarlos desde aquí con selectores genéricos y NO funcionó: las reglas de cada componente son más específicas y ganan la cascada. Para que esta capa se impusiera haría falta !important sobre decenas de selectores en 33 páginas, y eso rompe maquetas que no se ven en una auditoría automática. Lo medí, no funcionó, y lo retiro en vez de dejarlo puesto fingiendo que sí. La forma correcta —la que sí funcionó con .cdl-card y .cdl-title— es corregir cada componente EN SU FUENTE, que es donde la regla ya vive. Se hace aquí para los que más se ven, y el resto queda documentado como pendiente en vez de escondido. */ /* Contraste de la tinta secundaria. La raíz no era cada componente: era la variable --tx2, que TODO el proyecto usa para el texto de apoyo. Estaba en #8888aa → 5.7:1 sobre el fondo, justo en el límite y con sensación de apagado. Cambiarla una vez lo arregla en las 33 páginas sin tocar una sola maqueta. Se hace aquí porque esta hoja carga la última y gana la cascada. --tx3 sube en la misma proporción: era #44445a (2.4:1), por debajo del mínimo legible incluso para texto secundario. */ :root{ --tx2:var(--n-tinta-med,#b6b6d0); --tx3:var(--n-tinta-baja,#8484a1); } /* ══ FASE 7 · SOMBRAS CON TEMPERATURA ══════════════════════════════════════ El barrido encontró 22 sombras en negro puro repartidas por el proyecto. Sobre un fondo violáceo el negro no da profundidad: APAGA. Baja la luminancia y se lleva el tono por delante, que es buena parte de la sensación de "desteñido". No se puede reescribir cada regla —son decenas y muchas viven en atributos en línea—, pero sí se puede teñir el resultado: un filtro de sombra con color sobre los contenedores que la usan. Aquí se hace sobre las clases de superficie, que es donde estaban casi todas. */ /* OJO con el alcance: filter crea un contexto de apilamiento nuevo, asi que un position:fixed dentro deja de anclarse a la ventana. Por eso NO se aplica a .modal/.drawer/.sheet —que suelen contener elementos fijos— sino solo a las tarjetas de contenido, que son planas. */ /* Fase 70: se retira el filter:drop-shadow global de las superficies. `filter` crea un nuevo contexto de apilamiento y una capa de composición por tarjeta; además puede cambiar el anclaje de descendientes fixed. Las superficies ya tienen box-shadow en su componente fuente y en cd-glass.css, así que el filtro era duplicado y caro. */ /* ══ EMOJIS COMO ICONOS ════════════════════════════════════════════════════ Se encontraron 13 emojis usados como iconos de interfaz (👑, 🎁, 🪙…). Un emoji es tipografía del sistema: cambia de forma y de color en cada equipo, no hereda currentColor y rompe la alineación óptica con los iconos SVG del proyecto (el set Veta). Es la marca más reconocible de interfaz montada deprisa. No se sustituyen desde aquí —hay que cambiar el marcado uno por uno, y eso toca revisar cada contexto—, pero sí se corrige lo que más chirría: el tamaño y la alineación, para que al menos no bailen respecto al texto. */ .cd-pro,.beta-chip,.chip,.pill,.tab{ font-variant-emoji:text; } /* ══ FASE 8 · TECLADO Y OBJETIVOS TÁCTILES ═════════════════════════════════ Medido tabulando de verdad por las páginas: · el anillo de foco solo se veía en 1 de cada 6 paradas en /contacto y en 3 de 6 en mensajes: quien navega con teclado no sabe dónde está; · 23 elementos pulsables por debajo de 24×24 px entre el índice y contacto, cuando el mínimo cómodo con el dedo son 44 px. El foco se resuelve con :focus-visible, que solo se dibuja cuando el navegador detecta navegación por teclado: no ensucia el clic con ratón. Fase 70 unifica el foco con el oro: el foco es una señal de acción, mientras el violeta queda para comunidad/premium. */ :where(a,button,input,select,textarea,summary,[tabindex],[role="button"]):focus-visible{ outline:2px solid var(--n-oro,#f5c842); outline-offset:2px; border-radius:inherit; /* El halo despega el anillo del fondo oscuro, donde 2px de línea se pierde. */ box-shadow:0 0 0 4px rgba(245,200,66,.18); } /* El foco por RATÓN se queda como estaba: :focus-visible ya lo excluye, pero algunos navegadores antiguos dibujan :focus igualmente. */ :where(a,button,input,select,textarea):focus:not(:focus-visible){outline:none} /* Área táctil mínima sin mover la maqueta: se amplía la zona sensible con un pseudo-elemento invisible, en vez de agrandar el botón —que desplazaría todo lo de al lado—. Solo donde el elemento es realmente pequeño. */ .cdf-soc,.tbtn,.icobtn,.gal-x,.cdlv-gp-pin,.qty-btn,.pf-mini{ position:relative; } .cdf-soc::after,.tbtn::after,.icobtn::after,.gal-x::after,.cdlv-gp-pin::after,.qty-btn::after,.pf-mini::after{ content:"";position:absolute; top:50%;left:50%;transform:translate(-50%,-50%); width:max(100%,44px);height:max(100%,44px); } /* Los enlaces de texto del pie medían 14–19 px de alto: el ancho sobra, pero verticalmente son una línea fina difícil de acertar con el dedo. Dos intentos fallidos antes de dar con esto, ambos verificados con elementFromPoint: · pseudo-elemento absoluto → el punto seguía cayendo en el

padre; · padding con margen negativo → la zona crecía a 37px, pero los enlaces se solapaban entre sí (el hueco de la lista es de 7px y el margen negativo era de 9), así que el vecino robaba el clic. Lo que funciona: relleno REAL y el hueco de la lista reducido en la misma medida. La separación visual entre enlaces queda igual que antes y la zona sensible pasa de 19 a 33px. */ #view-landing .cdl-pie-col{gap:0} #view-landing .cdl-pie-col a,#view-landing .cdl-pie-legal a,.cdf-legal-id a{ display:inline-block; padding-top:7px;padding-bottom:7px; } /* ══ FASE 9 · CAMPOS QUE NO PROVOCAN ZOOM EN iOS ═══════════════════════════ Safari en iOS AMPLÍA la página automáticamente cuando enfocas un campo de texto con letra menor de 16px. El usuario toca para escribir y se encuentra la pantalla ampliada y descolocada, y luego tiene que volver a alejarla a mano. Es de los detalles que más delatan una interfaz no probada en móvil. Medido: 94 campos por debajo de 16px repartidos por 12 páginas. Se corrige SOLO en pantallas táctiles pequeñas: en escritorio los 13px siguen siendo la medida correcta para un panel denso, y subirlos allí descolocaría maquetas que están bien. `pointer:coarse` limita la regla a dedos, no a ratones. */ @media (max-width:820px), (pointer:coarse){ input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),textarea,select{ font-size:16px !important; } } /* ══ FASE 10 · UN SOLO FONDO Y UNA SOLA TIPOGRAFÍA BASE ════════════════════ El barrido de coherencia comparó las 23 páginas de interfaz y encontró que NO parecen la misma aplicación: · el fondo del documento variaba entre var(--n-fondo,#0b0b12) (sistema) y #0e0d16 (páginas de administración e inventario): al saltar de una a otra el fondo cambia de tono, que es de esas cosas que se notan sin saber por qué; · CUATRO tipografías base distintas — Inter en la aplicación, Sora en las páginas legales, Plus Jakarta en el centro de administración y Satoshi en sonidos. La familia de titulares sí puede variar; la del CUERPO no, porque es la que da la textura de la lectura. Se unifica el cuerpo en Inter y el fondo del documento en el del sistema. Los titulares conservan su familia: ahí la variación es intencionada. */ html{background-color:var(--n-fondo,var(--n-fondo,#0b0b12))} body{font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif} /* OJO con los selectores por subcadena: [class*="-head"] alcanzaba al propio en paginas cuya clase contiene esa cadena, y les cambiaba la fuente del CUERPO en vez de la de los titulares. Se listan las etiquetas y clases concretas. */ h1,h2,h3,h4,.lg-hero h1,.cdl-title,.cdl-heroh,.lg-toc-t{ font-family:var(--fd,"Plus Jakarta Sans"),system-ui,sans-serif; } /* ══ FASE 11 · CAPAS DE COMPOSICIÓN QUE NO SE VEN ═════════════════════════ Medido: la portada iba a ~11 fps con render por software; mensajes, a 63. La sospecha era el ambiente —cuatro capas con blur de 52 a 90px, tres de ellas animadas— y probé a sustituirlas por degradados radiales. LA MEDICIÓN LO DESMINTIÓ y por eso ese cambio NO está aquí: · ocultar la aurora y el calor ENTEROS solo subía de 11 a 12 fps; · en cambio la saturación de la portada caía de 0.449 a 0.324, porque el desenfoque extiende el color saturado sobre un área grande y el degradado no llega a lo mismo. Quitar algo que sí se ve, por una ganancia que no existe, es un mal cambio. El coste real está repartido por el pintado de toda la portada, no en un culpable único: sin ninguna animación subía a 18, y solo llegaba a 58 al ocultar la portada completa. Además, estas cifras vienen de un renderizador por software; en una tarjeta gráfica real el margen es otro. Lo que SÍ se retira es lo que cuesta sin verse: */ /* Los botones llevaban backdrop-filter:blur(9px) cada uno. Sobre un relleno OPACO ese desenfoque no se aprecia —no hay nada detrás que difuminar— pero obliga a una capa de composición por botón. Se conserva donde el material sí se nota: el vidrio del submenú y la placa del nombre. */ .cdl-primary,.cdl-google,.cdl-tab,.cdck-btn{backdrop-filter:none;-webkit-backdrop-filter:none} /* `contain:paint` avisa de que nada de estas capas se sale de sus límites, así que el navegador puede aislarlas y no repintar el resto al animarlas. No cambia un solo píxel de lo que se ve. */ #view-landing .cdl-aurora,#cd-calor{contain:paint} /* Nota que sustituye a un control oculto por la beta. Discreta: informa, no ocupa el sitio de lo que se ha quitado. */ .beta-nota{ font-size:12px;line-height:1.6;color:var(--n-tinta-med,var(--n-tinta-med,#b6b6d0)); background:rgba(245,200,66,.06); border:1px solid rgba(245,200,66,.20); border-radius:var(--r-sm,8px); padding:9px 12px;margin:8px 0; } /* ═══ AUDITORÍA ago 2026 · piezas de marca y beta COMPARTIDAS ═══════════════ Antes vivían solo en index.html (inline) y cd-main.css, así que mensajes, sonidos, botonera, avatar, inventario y las legales no podían pintarlas: el icono .cdrop salía invisible y la banda de beta no existía fuera del panel. cd-superficies.css lo cargan TODAS las páginas → única fuente. */ :root{--cdrop-m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 96'%3E%3Cpath d='M26 16h44a13 13 0 0 1 13 13v28a13 13 0 0 1-13 13H46L31 85V70h-5a13 13 0 0 1-13-13V29a13 13 0 0 1 13-13Z'/%3E%3C/svg%3E")} .cdrop{display:inline-block;width:.95em;height:.95em;vertical-align:-.14em; background:linear-gradient(135deg,#ffd977,var(--n-oro,#f5c842) 55%,#d9a12b); -webkit-mask:var(--cdrop-m) center/contain no-repeat;mask:var(--cdrop-m) center/contain no-repeat} .cdrop.acc{background:linear-gradient(135deg,#b892ff,#7b5cff)} .beta-chip{font-size:9px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;color:#1a1206; background:linear-gradient(135deg,#ffd977,var(--n-oro,#f5c842));padding:3px 9px;white-space:nowrap} .beta-aviso{display:flex;align-items:center;gap:10px;margin:0 0 16px;padding:11px 14px; border:1px solid rgba(245,200,66,.26);border-radius:12px; background:linear-gradient(180deg,rgba(245,200,66,.09),rgba(245,200,66,.03)); font-size:12.5px;line-height:1.5;color:#d6d8e4} .beta-aviso .beta-chip{flex:0 0 auto} #tt-banda-beta{position:fixed;left:0;right:0;bottom:0;z-index:9000; display:flex;align-items:center;gap:11px;padding:10px 16px; background:linear-gradient(90deg,#1b1626,#171725 60%,#1b1626); border-top:1px solid rgba(245,200,66,.30); box-shadow:0 -8px 26px -14px rgba(0,0,0,.8); font-size:12px;line-height:1.5;color:#c8cad8} #tt-banda-beta .tt-banda-tx{flex:1;min-width:0} #tt-banda-beta .beta-chip{flex:0 0 auto} #tt-banda-beta .tt-banda-x{flex:0 0 auto;width:26px;height:26px;border-radius:var(--r-sm,8px); border:1px solid rgba(255,255,255,.12);background:transparent;color:#9a9cb0; font-size:17px;line-height:1;cursor:pointer;transition:background .18s,color .18s} #tt-banda-beta .tt-banda-x:hover{background:rgba(255,255,255,.07);color:#f3f4f8} html.is-beta body{padding-bottom:58px} @media(max-width:760px){ html.is-beta body{padding-bottom:72px} #tt-banda-beta{bottom:0;font-size:11px;padding:9px 12px;gap:8px} #tt-banda-beta .tt-banda-tx{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} } /* No simular redes oficiales: los iconos permanecen ocultos hasta que /api/site-info aporta al menos una URL real y cd-site-info añade has-links. */ .cdf-social:not(.has-links), #view-landing .cdf-social:not(.has-links){display:none!important}