/* ═══════════════════════════════════════════════════════════════════════ FRQNCY · el acabado (18-sep-2026, tercera vuelta) ═══════════════════════════════════════════════════════════════════════ Pedro, con siete capturas de la app FRQNCY (myfrqncy.app): "quiero que la interfaz se vea similar a este diseño, igual el inicio donde las personas se registran. Solo a nivel de diseño." Después: "que no sea dorado, tiene que ser el mismo color de ATMA; yo digo en la apariencia, que se ve muy luxury y estético". Y después: "métele más de ese estilo; los botones de play también, están muy feos; revisa a muy detalle". Lo que se copia de FRQNCY es el ACABADO, con los colores de ATMA: · NEGRO. Su fondo es hsl(20 10% 4%): casi negro, sin auroras. Aquí, negro con el índigo de ATMA y UN resplandor violeta arriba. Se apagan las auroras de luxury. · PLANO. Sus tarjetas son #131313 con un borde de 1 px al 10-15 % y esquinas de 28 px: sin degradados dentro, sin brillo interior, sin sombras dramáticas. · PÍLDORAS. Botones, campos, pestañas, opciones: radio 9999. El botón principal es una píldora MATE (la suya es bronce sólido, no un degradado brillante): aquí violeta mate. Los secundarios y las opciones, contorno de 1 px sobre transparente. · FINO. SF Pro / Inter para el texto, pesos 300-400, títulos grandes y ligeros. El display sigue en Sora. · El reproductor: núcleo de vidrio con borde fino e icono blanco (como su botón de volver), aro de avance violeta alrededor, onda de barras finas blanco → violeta, sin resplandores. El oro sigue siendo el color del nivel y del estado. Va DESPUÉS de estilos, luxury y reportes; se quita con una línea del y la app vuelve a luxury tal cual. ═══════════════════════════════════════════════════════════════════════ */ :root{ --plano-0:#050310; --plano-1:#070417; --plano-2:#0a061c; --plano-3:#100b28; --linea:#1a1638; --linea-viva:#2c2568; --hilo:rgba(238,237,245,.09); --tinta:#eeedf5; --tinta-media:#b4b2cc; --tinta-tenue:#7f7c99; /* Vidrio: casi nada de relleno, borde fino */ --vidrio:rgba(238,237,245,.035); --vidrio-fuerte:rgba(238,237,245,.06); --vidrio-brillo:rgba(238,237,245,.09); --vidrio-borde:rgba(238,237,245,.12); /* Un resplandor, no un cielo */ --ambiente:rgba(122,78,255,.22); /* El violeta mate del botón principal (es el violeta de ATMA, sin brillo) */ --mate:linear-gradient(180deg, #5b47cc, #4132a2); --mate-sombra:0 10px 30px rgba(122,78,255,.22), inset 0 1px 0 rgba(255,255,255,.12); --texto:-apple-system, 'SF Pro Display', 'SF Pro Text', 'Inter', ui-sans-serif, system-ui, sans-serif; } body[data-vista="inicio"]{ --ambiente:rgba(122,78,255,.22) } body[data-vista="personaje"]{ --ambiente:rgba(122,78,255,.14) } body[data-vista="nivel"]{ --ambiente:rgba(63,208,200,.10) } body[data-vista="chat"]{ --ambiente:rgba(143,107,255,.18) } body[data-vista="protocolos"]{ --ambiente:rgba(95,242,214,.08) } /* ── Negro con un resplandor ──────────────────────────────────────────── */ body{ background: radial-gradient(ellipse 80% 46% at 50% 0%, var(--ambiente) 0%, transparent 62%), var(--plano-0) !important; } .lx-cielo{ display:none } body::after{ opacity:.28 } body{ font-weight:300 } h1, h2, h3{ font-weight:300 } /* ── El armazón ───────────────────────────────────────────────────────── */ aside, .lateral, nav.lateral{ background:rgba(5,3,16,.88) !important; border-right:1px solid rgba(238,237,245,.06); backdrop-filter:blur(24px); } nav a{ padding:11px 16px; font-size:14.5px } nav a.aqui{ background:rgba(238,237,245,.07); box-shadow:none } .barra{ background:linear-gradient(180deg, rgba(5,3,16,.82), rgba(5,3,16,.6)) !important; border-bottom:none } .portada{ background: radial-gradient(70% 120% at 50% -10%, rgba(124,58,237,.12) 0%, transparent 62%), linear-gradient(180deg, rgba(5,3,16,.4), rgba(5,3,16,.72)) !important; } .lx-pestanas{ background:rgba(5,3,16,.82); border:1px solid rgba(238,237,245,.08); box-shadow:0 18px 40px rgba(0,0,0,.55); } .lx-pestanas a.aqui{ background:rgba(238,237,245,.09); box-shadow:none } /* ── Botones ──────────────────────────────────────────────────────────── */ /* El principal: píldora violeta mate, texto claro, sin brillo de neón */ .btn-luz, .btn-luz:hover:not(:disabled), .descarga-grande:first-child, .doc-mando.fuerte, .doc-mando.fuerte:hover, .pestanas-nivel .pestana.aqui, .pestanas-nivel .pestana.aqui:hover, .mes-portada-abierto, .doc-mini-velo::before, .doc-portada-ver, .mando-enviar{ color:#f1eeff !important; background:var(--mate) !important; border-color:transparent !important; box-shadow:var(--mate-sombra) !important; filter:none; } .btn-luz:hover:not(:disabled), .doc-mando.fuerte:hover{ filter:brightness(1.08) } .doc-mini-velo{ color:#f1eeff } /* Los secundarios: contorno fino sobre transparente, como sus opciones */ .btn-suave, .descarga-grande, .boton-panel, .doc-mando, .lx-boton, .mando{ background:transparent !important; border:1px solid rgba(238,237,245,.18) !important; color:var(--tinta); box-shadow:none !important; backdrop-filter:none; } .btn-suave:hover:not(:disabled), .descarga-grande:hover, .boton-panel:hover, .doc-mando:hover, .lx-boton:hover, .mando:hover{ background:rgba(238,237,245,.06) !important; border-color:rgba(238,237,245,.32) !important; color:var(--tinta); } .mes-acciones button{ color:var(--tinta); letter-spacing:.18em } .mes-acciones button:hover{ background:rgba(238,237,245,.05); color:#fff } .lx-nuevo-mini{ background:var(--mate); color:#f1eeff } .sello{ background:transparent; border:1px solid rgba(238,237,245,.14); color:var(--tinta-media) } .chip{ background:transparent; border-color:rgba(238,237,245,.14) } /* ── Campos ───────────────────────────────────────────────────────────── */ input, select{ background:rgba(238,237,245,.04) !important; border:1px solid rgba(238,237,245,.12) !important; box-shadow:none; padding:15px 22px; font-size:15px } textarea{ background:rgba(238,237,245,.04) !important; border:1px solid rgba(238,237,245,.12) !important; box-shadow:none } input:hover, textarea:hover, select:hover{ border-color:rgba(238,237,245,.24) !important } input:focus, textarea:focus, select:focus{ background:rgba(238,237,245,.06) !important; border-color:rgba(122,78,255,.6) !important; box-shadow:0 0 0 4px rgba(122,78,255,.12); } input::placeholder, textarea::placeholder{ color:var(--tinta-tenue) } label{ color:var(--tinta-tenue) } /* ── Tarjetas: planas, borde fino, esquinas grandes ───────────────────── */ .panel .celda, .panel .celda.alta, .celda, .lx-tarjeta, .mes-tarjeta, .nota, .marco-grafica, .compositor{ background:rgba(238,237,245,.035) !important; background-image:none !important; border:1px solid rgba(238,237,245,.09) !important; border-radius:28px; box-shadow:none !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; } .panel .celda.alta{ background:rgba(238,237,245,.05) !important } .lx-tarjeta:hover{ border-color:rgba(var(--c),.5) !important; transform:translateY(-2px) } .lx-tarjeta .rotulo{ color:var(--tinta-tenue) } .lx-tarjeta.oro .rotulo{ color:var(--oro) } .dato-mes{ background:rgba(238,237,245,.03); border-color:rgba(238,237,245,.08); border-radius:20px } .dato-mes b{ color:var(--oro) } .mes-tarjeta{ border-radius:24px } .mes-tarjeta.abierto{ border-color:rgba(122,78,255,.55) !important } .mes-portada, .doc-mini-portada{ background:radial-gradient(70% 55% at 50% 30%, rgba(122,78,255,.22), transparent 72%), linear-gradient(180deg, #0c0822, #07041a) } .doc-mini{ box-shadow:0 14px 34px rgba(0,0,0,.5), 0 0 0 1px rgba(238,237,245,.10) } .doc-mini:hover{ box-shadow:0 22px 44px rgba(0,0,0,.6), 0 0 0 1px rgba(122,78,255,.55) } .chat-lado{ background:transparent !important; border-right:1px solid rgba(238,237,245,.06) } .burbuja-texto{ background:rgba(238,237,245,.05); box-shadow:none; border:1px solid rgba(238,237,245,.08) } .burbuja.alumno .burbuja-texto{ background:rgba(122,78,255,.18); border-color:rgba(122,78,255,.22); box-shadow:none } .compositor{ border-radius:28px } .mando-enviar{ box-shadow:none !important } /* Las filas de protocolos: opciones de contorno, como las de FRQNCY */ .lx-fila{ background:transparent; border:1px solid rgba(238,237,245,.12); padding:12px 16px; font-size:13px } .lx-fila:hover:not(:disabled){ border-color:rgba(238,237,245,.3); background:rgba(238,237,245,.04) } .lx-fila .marca{ border-color:rgba(238,237,245,.35) } .lx-fila.hecha{ border-color:rgba(238,237,245,.06) } /* Las pestañas de Mi nivel: pista de contorno, activa mate */ .pestanas-nivel{ background:transparent; border:1px solid rgba(238,237,245,.12); box-shadow:none } .pestanas-nivel .pestana{ color:var(--tinta-media) } /* ── El reproductor ───────────────────────────────────────────────────── */ /* Fuera la caja: el .rep traía borde, radio y sombra de una regla vieja. */ .rep, .rep.tarjeta, .rep.lateral, .rep.compacto{ border:none !important; border-radius:0 !important; box-shadow:none !important; background:transparent !important; padding:0 } .rep-escena::before, .rep-escena::after{ display:none } /* El núcleo: un disco con el degradado de la casa (violeta → turquesa), un brillo arriba como si fuera de vidrio y el triángulo blanco. Pedro vio el de vidrio oscuro con borde y dijo "esto está muy feo" (18-sep, noche). */ .rep-nucleo{ width:64px; height:64px; color:#fff; border:none; background: radial-gradient(70% 55% at 50% 18%, rgba(255,255,255,.34), transparent 65%), linear-gradient(135deg, #8FA3F2 0%, #6F4DEF 48%, #3FD0C8 100%); box-shadow: inset 0 1px 1px rgba(255,255,255,.45), inset 0 -8px 16px rgba(3,1,16,.25), 0 0 0 1px rgba(255,255,255,.10), 0 0 26px rgba(122,78,255,.42), 0 12px 30px rgba(0,0,0,.45); transition:transform .25s, box-shadow .25s, filter .25s; } .rep-nucleo:hover{ filter:brightness(1.1); box-shadow:inset 0 1px 1px rgba(255,255,255,.5), inset 0 -8px 16px rgba(3,1,16,.2), 0 0 0 1px rgba(255,255,255,.14), 0 0 34px rgba(63,208,200,.45), 0 14px 34px rgba(0,0,0,.5) } [data-sonando] .rep-nucleo{ box-shadow:inset 0 1px 1px rgba(255,255,255,.5), 0 0 0 6px rgba(122,78,255,.14), 0 0 40px rgba(63,208,200,.5), 0 12px 30px rgba(122,78,255,.35) } .rep-icono{ width:24px; height:24px; margin-left:3px; filter:drop-shadow(0 1px 2px rgba(0,0,0,.35)) } .rep-pausa{ margin-left:0 } /* El aro de avance alrededor del núcleo (la variable --avance la pone el reproductor) */ .rep.tarjeta .rep-nucleo{ position:relative; inset:auto; transform:none; order:-1; flex:none } .rep.tarjeta .rep-nucleo::before{ content:''; position:absolute; inset:-6px; border-radius:50%; pointer-events:none; background:conic-gradient(var(--luz) calc(var(--avance, 0) * 1%), rgba(238,237,245,.10) 0); -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px)); mask:radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px)); transition:background .3s; } /* La onda: barras finas, lo que falta en gris, lo que sonó de blanco a violeta */ .rep{ --onda-1:#ffffff; --onda-2:#c9bbff; --onda-3:#7a4eff; --onda-apagada:rgba(238,237,245,.16); --onda-brillo:rgba(122,78,255,.0); --onda-difusion:0; --onda-grosor:2; } .rep.tarjeta .rep-escena{ gap:18px } .rep.tarjeta .rep-onda{ height:48px } .rep.tarjeta .rep-tiempos{ margin:10px 0 0 82px; font-size:11px; letter-spacing:.06em; color:var(--tinta-tenue) } [data-sonando] .rep-tiempos .rep-va{ color:var(--tinta) } .audio-bajar{ margin-top:18px } /* ── La entrada ───────────────────────────────────────────────────────── */ .acceso{ background:var(--plano-0); gap:40px } .acceso::before{ background: radial-gradient(56% 40% at 50% 20%, rgba(122,78,255,.36) 0%, rgba(111,77,239,.12) 42%, transparent 70%), radial-gradient(40% 34% at 10% 76%, rgba(63,208,200,.08) 0%, transparent 65%), var(--plano-0); animation:none; inset:0; } .acceso::after{ background:radial-gradient(48% 62% at 50% 40%, rgba(167,139,250,.12) 0%, rgba(167,139,250,.04) 40%, transparent 70%); animation:none; } .rayos{ display:none } .marca-grande .logo{ font-size:clamp(34px, 6.5vw, 48px); font-weight:300 } .tarjeta-acceso{ max-width:430px; padding:38px 34px 30px; background:rgba(238,237,245,.035) !important; background-image:none !important; border:1px solid rgba(238,237,245,.11); border-radius:30px; box-shadow:0 40px 100px -30px rgba(0,0,0,.9) !important; backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px); } .tarjeta-acceso:focus-within{ border-color:rgba(122,78,255,.45); box-shadow:0 40px 100px -30px rgba(0,0,0,.9), 0 0 40px -10px rgba(122,78,255,.28) !important } .tarjeta-acceso h1{ font-weight:300; font-size:29px } .tarjeta-acceso .entradilla{ font-size:14px; color:var(--tinta-media) } .tarjeta-acceso .btn-luz{ padding:17px 24px; font-size:15px; letter-spacing:.02em; text-transform:none; margin-top:6px } .aviso-correo{ margin-top:20px; padding:0 !important; background:transparent !important; border:none !important; color:var(--tinta-tenue) !important; box-shadow:none !important; font-size:12.5px; } .acceso .pista{ color:var(--tinta-tenue) } .acceso a{ color:var(--luz-magenta) } /* ── El lector y el visor ─────────────────────────────────────────────── */ .lector-velo{ background:rgba(3,2,12,.94) } .lector-barra{ background:rgba(5,3,16,.6); border-bottom-color:rgba(238,237,245,.08) } .lector-cerrar{ border-color:rgba(238,237,245,.18); background:transparent } .doc-visor{ background:#050310 } .doc-pagina{ box-shadow:0 18px 50px rgba(0,0,0,.6), 0 0 0 1px rgba(238,237,245,.08) } .doc-pager{ background:transparent; border-color:rgba(238,237,245,.14) } /* ── El Personaje: barras finas, como su barra de progreso ────────────── */ .barra-energia{ height:8px; background:rgba(238,237,245,.08); box-shadow:none } .barra-energia .energia{ background:linear-gradient(90deg, #b9a5ff, #7a4eff 60%, #3fd0c8); background-size:100% 100%; box-shadow:0 0 12px rgba(122,78,255,.35); animation:none } .barra-energia .energia::after{ display:none } .barra-energia .punta{ display:none } ::selection{ background:rgba(122,78,255,.35) } /* ── El selector del mes en Mis reportes: título grande con una línea, no un campo con caja (la regla general de campos se lo comía) ───────────── */ .elegir-reporte select, .elegir-reporte select:hover, .elegir-reporte select:focus{ background:transparent !important; border:none !important; border-bottom:1px solid rgba(238,237,245,.14) !important; border-radius:0 !important; padding:4px 38px 10px 0 !important; box-shadow:none !important; font-family:var(--display); font-size:28px; font-weight:300; letter-spacing:-.02em; color:var(--tinta); } .elegir-reporte select:hover{ border-bottom-color:rgba(238,237,245,.3) !important } .elegir-reporte select:focus{ border-bottom-color:var(--luz) !important } /* Lo mismo para cualquier otro desplegable "de título" que use la app */ select.titulo, .selector-mes select{ background:transparent !important; border:none !important; border-bottom:1px solid rgba(238,237,245,.14) !important; border-radius:0 !important; box-shadow:none !important } /* ═══════════════════════════════════════════════════════════════════════ BOTONES · la receta de ADSFORGE / IA Operator (18-sep-2026, noche) Pedro: "revisa mi app IA Operator y mira los botones para que lo hagas igual". Réplica de `.af-btn-primary` de su globals.css, con los colores de ATMA en vez del verde: PRIMARIO: un degradado cónico da una vuelta cada 4 s por el borde; el relleno (::before, inset 1px) lo tapa y solo asoma 1 px: una luz que recorre el contorno. El relleno lleva un destello que cruza el botón cada 6 s. Al pasar crece 2 % y se enciende un halo; al pulsar se encoge; la flecha ↗ (::after) avanza. En ADSFORGE el cónico es un ::before de 800 px que rota; aquí gira el propio fondo del botón (variable de ángulo animada con @property) para dejar el ::after libre para la flecha. SECUNDARIO: borde fino, fondo hundido; al pasar se levanta 1 px y el borde toma el acento. Con "reducir movimiento", ni giro ni destello. ═══════════════════════════════════════════════════════════════════════ */ @property --giro{ syntax:''; inherits:false; initial-value:0deg } :root{ --at-borde-base:rgba(233,233,242,.16); --at-fill:linear-gradient(110deg, #120e2a 0%, #0b0918 65%, #0c0a1c 100%); --at-fill-hover:linear-gradient(110deg, #1a1440 0%, #100c22 65%, #110d26 100%); --at-on-fill:#f5f3ff; --at-shadow-pop:0 10px 30px rgba(0,0,0,.45); --at-sunken:rgba(233,233,242,.025); --at-line-strong:rgba(233,233,242,.14); } @keyframes at-giro{ to{ --giro:360deg } } @keyframes at-destello{ 0%, 62%{ background-position:160% 0, 0 0 } 88%, 100%{ background-position:-60% 0, 0 0 } } /* Todos: transición suave, se encogen al pulsar */ .btn-luz, .btn-suave, .descarga-grande, .boton-panel, .doc-mando, .lx-boton, .mes-acciones button, .audio-bajar, .lector-cerrar, .nueva-conv, .rep-nucleo, .mando{ transition-property:color, background-color, border-color, box-shadow, transform; transition-duration:300ms; transition-timing-function:cubic-bezier(.4,0,.2,1); } .btn-luz:not(:disabled):active, .btn-suave:not(:disabled):active, .doc-mando:active, .lx-boton:active, .mes-acciones button:active, .rep-nucleo:active{ transform:scale(.98) } /* PRIMARIO: Entrar, Nueva conversación, enviar formulario, Abrir (documento y meses), el play */ .btn-luz, .doc-mando.fuerte, .mes-acciones button, .rep-nucleo{ position:relative; isolation:isolate; border:0 !important; color:var(--at-on-fill) !important; background:conic-gradient(from var(--giro, 0deg), transparent 0%, transparent 38%, rgba(122,78,255,.35) 54%, #7a4eff 68%, #d8cffd 75%, #3fd0c8 84%, transparent 100%), var(--at-borde-base) !important; box-shadow:var(--at-shadow-pop) !important; filter:none !important; animation:at-giro 4s linear infinite; transition:transform 500ms cubic-bezier(.4,0,.2,1), box-shadow 500ms cubic-bezier(.4,0,.2,1), color 300ms; } .btn-luz::before, .doc-mando.fuerte::before, .mes-acciones button::before, .rep-nucleo::before, .rep.tarjeta .rep-nucleo::before{ content:''; position:absolute; inset:1px; z-index:-1; border-radius:inherit; pointer-events:none; padding:0; width:auto; height:auto; left:1px; top:1px; transform:none; -webkit-mask:none; mask:none; background:linear-gradient(105deg, transparent 38%, rgba(255,255,255,.14) 50%, transparent 62%) no-repeat, var(--at-fill); background-size:250% 100%, auto; background-position:160% 0, 0 0; animation:at-destello 6s ease-in-out infinite; transition:background 300ms; } .btn-luz:hover, .doc-mando.fuerte:hover, .mes-acciones button:hover, .rep-nucleo:hover{ transform:scale(1.02); color:#fff !important; box-shadow:0 0 30px rgba(122,78,255,.30), 0 0 60px rgba(63,208,200,.12) !important; } .btn-luz:hover::before, .doc-mando.fuerte:hover::before, .mes-acciones button:hover::before, .rep-nucleo:hover::before, .rep.tarjeta .rep-nucleo:hover::before{ background-image:linear-gradient(105deg, transparent 38%, rgba(255,255,255,.14) 50%, transparent 62%), var(--at-fill-hover); } .btn-luz:disabled, .btn-luz:disabled::before{ animation-play-state:paused } /* La flecha ↗ del principal, que avanza al pasar (como el ArrowUpRight de ADSFORGE) */ .btn-luz::after{ content:'↗'; margin-left:10px; font-size:1.05em; line-height:1; opacity:.9; display:inline-block; transition:transform 300ms cubic-bezier(.4,0,.2,1) } .btn-luz:hover::after{ transform:translate(2px,-2px) } .tarjeta-acceso .btn-luz{ display:inline-flex; align-items:center; justify-content:center; width:100% } .doc-mando.fuerte svg, .mes-acciones button svg{ transition:transform 300ms cubic-bezier(.4,0,.2,1) } .doc-mando.fuerte:hover svg, .mes-acciones button:hover svg{ transform:translate(2px,-2px) } /* El Abrir de las tarjetas de mes: cuadrado arriba, redondo abajo */ .mes-acciones button{ border-radius:0 0 22px 22px !important; margin:0 } /* SECUNDARIO: Descargar, Descargar la nota de voz, Resumir, cerrar el lector, mandos */ .btn-suave, .descarga-grande, .boton-panel, .doc-mando:not(.fuerte), .lx-boton, .audio-bajar, .lector-cerrar, .mando{ background:var(--at-sunken) !important; background-image:none !important; border:1px solid var(--at-line-strong) !important; color:var(--tinta) !important; box-shadow:none !important; filter:none !important; animation:none; } .btn-suave:hover:not(:disabled), .descarga-grande:hover, .boton-panel:hover, .doc-mando:not(.fuerte):hover, .lx-boton:hover, .audio-bajar:hover, .lector-cerrar:hover, .mando:hover:not(:disabled){ transform:translateY(-1px); border-color:rgba(122,78,255,.4) !important; background:rgba(233,233,242,.05) !important; color:#fff !important; } .btn-suave::before, .descarga-grande::before, .boton-panel::before, .doc-mando:not(.fuerte)::before, .lx-boton::before, .audio-bajar::before, .lector-cerrar::before{ content:none } /* El play: disco primario (52 px). Al sonar, el aro deja de girar y marca el avance. */ .rep-nucleo{ color:#fff } .rep.tarjeta .rep-nucleo{ position:relative; inset:auto; transform:none; order:-1; flex:none; width:52px !important; height:52px !important } .rep.tarjeta .rep-nucleo:hover{ transform:scale(1.04) } .rep-icono{ position:relative; z-index:1; filter:none } .rep.tarjeta .rep-icono{ width:19px; height:19px; margin-left:2px } .rep.tarjeta[data-sonando] .rep-nucleo{ animation:none; background:conic-gradient(var(--luz-punta) calc(var(--avance, 0) * 1%), var(--at-borde-base) 0) !important } .rep.tarjeta[data-sonando] .rep-nucleo::before{ animation:none; background:var(--at-fill-hover) } .rep.tarjeta .rep-escena{ gap:16px } .rep.tarjeta .rep-tiempos{ margin-left:68px } .rep.tarjeta .rep-tiempos{ margin-left:calc(52px + 16px) } /* Los mandos del chat: redondos y con el icono centrado; enviar en claro */ .mando, .mando-enviar{ width:42px !important; height:42px !important; padding:0 !important; border-radius:50% !important; display:grid !important; place-items:center; line-height:0; } .mando svg, .mando-enviar svg{ width:18px; height:18px; margin:0; display:block } .mando-enviar svg{ transform:translate(-1px, 1px) } .mando-enviar{ background:var(--tinta) !important; color:var(--plano-0) !important; border-color:transparent !important } .mando-enviar:hover:not(:disabled){ background:#fff !important; color:var(--plano-0) !important; transform:translateY(-1px) } .compositor-mandos{ gap:8px } @media (prefers-reduced-motion:reduce){ .btn-luz, .doc-mando.fuerte, .mes-acciones button, .rep-nucleo{ animation:none; --giro:40deg } .btn-luz::before, .doc-mando.fuerte::before, .mes-acciones button::before, .rep-nucleo::before{ animation:none } .btn-luz:hover, .doc-mando.fuerte:hover, .mes-acciones button:hover, .rep-nucleo:hover{ transform:none } } /* ═══════════════════════════════════════════════════════════════════════ EL BOTÓN DE REPRODUCIR (19-sep-2026) Pedro: "este puede quedar mejor, no está muy centrado, y no está muy bonito ese botón de reproductor". Dos cosas. (1) El centro: el triángulo llevaba `margin-left:2px` de una versión vieja, encima de un icono que YA está centrado por su centro de masa (el path va de x=8.5 a x=19 sobre 24, centroide 12). Se quita: el margen lo sacaba del medio. (2) El aspecto: la receta de los botones de ADSFORGE deja un arco de luz sobre fondo oscuro, que en un círculo parece un indicador de carga a medias. Aquí el play es un DISCO de luz: el degradado de ATMA, un brillo arriba como si fuera de vidrio, un destello que lo cruza cada 6 s y, por fuera, un anillo tenue con una luz que lo orbita. Al sonar, ese anillo deja de girar y marca el avance del audio. ═══════════════════════════════════════════════════════════════════════ */ @keyframes at-orbita{ to{ --giro:360deg } } .rep .rep-nucleo{ /* El relleno de la regla global `button{padding:12px 22px}` dejaba la caja de contenido en 8 px dentro de un botón de 52: el icono se iba 6 px a la derecha. Por eso "no está muy centrado". */ padding:0 !important; place-items:center; line-height:0; animation:none !important; overflow:visible !important; border:0 !important; background: radial-gradient(76% 62% at 50% 16%, rgba(255,255,255,.40) 0%, rgba(255,255,255,0) 62%), linear-gradient(150deg, #9d86ff 0%, #6f4def 48%, #34b7c4 100%) !important; box-shadow: inset 0 1px 1.5px rgba(255,255,255,.55), inset 0 -10px 18px rgba(8,4,34,.30), 0 0 0 1px rgba(255,255,255,.07), 0 10px 28px rgba(122,78,255,.35), 0 0 34px rgba(63,208,200,.16) !important; color:#fff !important; transition:transform .35s var(--curva-lx), box-shadow .35s, filter .35s; } /* El anillo de fuera: tenue todo alrededor, con una luz que lo orbita */ .rep .rep-nucleo::before, .rep.tarjeta .rep-nucleo::before{ content:''; position:absolute; inset:-5px; left:-5px; top:-5px; width:auto; height:auto; transform:none; border-radius:50%; padding:1.5px; z-index:-1; pointer-events:none; background:conic-gradient(from var(--giro, 0deg), rgba(233,233,242,.10) 0deg, rgba(233,233,242,.10) 250deg, rgba(122,78,255,.85) 312deg, rgba(63,208,200,.95) 348deg, rgba(233,233,242,.10) 360deg) !important; -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite:exclude; animation:at-orbita 5s linear infinite; } /* El destello que cruza el disco, como en los botones de ADSFORGE */ .rep .rep-nucleo::after{ content:''; position:absolute; inset:0; border-radius:50%; z-index:0; pointer-events:none; background:linear-gradient(105deg, transparent 38%, rgba(255,255,255,.28) 50%, transparent 62%) no-repeat; background-size:250% 100%; background-position:160% 0; animation:at-destello 6s ease-in-out infinite; } .rep .rep-icono{ position:relative; z-index:1; margin:0 !important; filter:drop-shadow(0 1px 2px rgba(10,5,40,.45)) } .rep.tarjeta .rep-icono{ width:20px; height:20px } .rep .rep-nucleo:hover{ filter:brightness(1.06) } .rep.tarjeta .rep-nucleo:hover{ transform:scale(1.05); box-shadow: inset 0 1px 1.5px rgba(255,255,255,.6), inset 0 -10px 18px rgba(8,4,34,.26), 0 0 0 1px rgba(255,255,255,.1), 0 12px 34px rgba(122,78,255,.45), 0 0 44px rgba(63,208,200,.22) !important } .rep.tarjeta .rep-nucleo:active{ transform:scale(.97) } /* Sonando: el anillo deja de orbitar y cuenta el avance */ .rep.tarjeta[data-sonando] .rep-nucleo{ background: radial-gradient(76% 62% at 50% 16%, rgba(255,255,255,.34) 0%, rgba(255,255,255,0) 62%), linear-gradient(150deg, #8f77ff 0%, #6243e6 48%, #2ea9bb 100%) !important; } .rep.tarjeta[data-sonando] .rep-nucleo::before{ animation:none; background:conic-gradient(var(--luz-punta) calc(var(--avance, 0) * 1%), rgba(233,233,242,.12) 0) !important; } .rep.tarjeta[data-sonando] .rep-nucleo::after{ animation-duration:3.5s } @media (prefers-reduced-motion:reduce){ .rep .rep-nucleo::before{ animation:none; --giro:40deg } .rep .rep-nucleo::after{ animation:none; background-position:160% 0 } }