@charset "UTF-8"; /* ========================================================================= Algoritmo Trading — sistema de diseño público Claro · acento NEGRO · tecnológico minimalista TRES REGLAS QUE GOBIERNAN ESTE FICHERO Y NO SE NEGOCIAN ------------------------------------------------------ 1. CERO `«bang-important»`. Todo cuelga de `.algt-auth-form-wrap` (y de `.algt-panel` en M4) con UN escalón de especificidad. La hoja de la que se parte necesitaba 74 líneas de "blindaje" con «bang-important» precisamente porque sus reglas vivían sueltas en el documento y competían de tú a tú con el tema del sitio; en cuanto el CSS está scoped, ese blindaje sobra entero. 2. CERO `«at-import»`. La hoja original importaba tres familias de Google Fonts en su línea 7: una petición bloqueante en el que retrasa el primer pintado de TODAS las páginas del sitio (no solo las del plugin) y un origen externo más que declarar en la CSP. Aquí, pila del sistema. 3. Foco visible SIEMPRE. Ningún `outline: none` se queda sin sustituto. Donde se retira el contorno nativo se pone, en la misma regla, borde de acento + halo `--algt-focus`; y sobre el botón primario (negro sobre tarjeta clara) además un `outline` con separación, porque un halo translúcido pegado a una caja negra no llega al 3:1 que exige WCAG para un indicador de foco. ESTE FICHERO SE ESCRIBE CONTRA EL MARKUP REAL de public/views/*.php. Cada id, clase y atributo que se estiliza aquí existe allí; si cambia el markup, cambia esta hoja. No hay reglas "por si acaso" para DOM que nadie pinta. REPARTO POR HITOS M2 (§§1–14) → tokens, reset, tarjeta de autenticación, formularios, inputs, contraseñas, teléfono, botones, mensajes, responsive. M4 (§15, al final) → panel del miembro: armazón, tira de pestañas, píldoras, tablas, Inicio, Cuenta, Avisos y Soporte. Todo bajo `.algt-panel`. M8 → las pantallas de «Mi Bot» (§15.13, rotulada y vacía). El resto de los componentes que necesita —píldoras, tarjetas, tablas, botones, formularios— ya están aquí: ese hito maqueta, no inventa sistema. ========================================================================= */ /* ========================================================================= 1. TOKENS ------------------------------------------------------------------------- Viven en :root, no dentro del scope, por dos motivos: el modo oscuro se conmuta con un atributo en , y M4 necesita los mismos valores bajo `.algt-panel`. Declarar variables en :root no rompe el scoping — lo que está scoped son las REGLAS que pintan, no los valores que consultan. Los contrastes están verificados sobre el fondo con el que de verdad se usan —y "de verdad" incluye --algt-surface-3, que es el más oscuro de los cuatro y donde caen la fecha de una burbuja del equipo en el hilo de soporte y la barra de fuerza de contraseña; medir solo contra el blanco es exactamente cómo se cuela un fallo de AA en el sitio menos visible: --algt-text 20.1:1 · --algt-text-2 8.6:1 · --algt-text-3 5.8:1 (4.8:1 sobre --algt-surface-3), y los cuatro semánticos por encima de 4.5:1 sobre sus fondos. Cambiar un hex de aquí es rehacer esa cuenta. ========================================================================= */ :root { /* ── Superficies ───────────────────────────────────────────────────── Cuatro niveles y ni uno más. La jerarquía de este producto la hace el BORDE de 1px y el espacio, no una escalera de grises: si cada caja tiene su propio tono, el ojo deja de saber qué es contenedor y qué es dato. */ --algt-bg: #FFFFFF; --algt-surface: #FAFAFA; --algt-surface-2: #F4F4F5; --algt-surface-3: #E9E9EC; /* --algt-border es la línea de reposo; --algt-border-strong es la que lleva un control con el que se PUEDE interactuar (input, select, botón fantasma). Esa distinción es lo que hace que un formulario se lea sin sombras. */ --algt-border: #E2E2E6; --algt-border-strong: #C9C9D0; --algt-text: #0A0A0B; --algt-text-2: #4B4B55; /* #65656F y no #6B6B76: el gris terciario NO se pinta solo sobre blanco. Cae también sobre --algt-surface-3 (#E9E9EC) —la fecha de la burbuja del equipo en el hilo de soporte y la pista de la barra de fuerza de contraseña— y ahí el #6B6B76 daba 4,34:1, por debajo del 4,5:1 que la AA exige para texto pequeño (esas dos piezas usan --algt-fs-xs, 12px). Con #65656F sube a 4,76:1 sobre surface-3 y a 5,76:1 sobre el fondo, así que el resto de usos solo mejora. Es el MISMO ajuste que el bloque oscuro ya había hecho en su lado (#8A8A96 → #94949F) y por el mismo motivo; en claro se había quedado sin hacer. */ --algt-text-3: #65656F; /* ── Acento ────────────────────────────────────────────────────────── El acento ES el texto: negro. Deliberado. Un acento cromático obligaría a decidir cuándo algo es "de marca" y cuándo es "de interfaz"; con el negro, destacar cuesta caro y por eso se usa poco: botón primario, foco, pestaña activa. El dorado #c9a227 del sistema del que se parte no aparece aquí. */ --algt-accent: #0A0A0B; --algt-accent-hover: #26262C; --algt-accent-active: #000000; --algt-accent-soft: #F4F4F5; --algt-accent-dim: rgba(10, 10, 11, .06); --algt-accent-ring: rgba(10, 10, 11, .18); --algt-text-on-accent: #FFFFFF; /* ── Semánticos ────────────────────────────────────────────────────── Trío por color (texto / fondo / borde) para que un estado se pinte SIEMPRE igual: fondo tenue, borde de 1px y texto oscuro legible. Nunca texto de color sobre fondo blanco a secas, que es donde se pierden los 4.5:1. */ --algt-green: #0F7A3D; --algt-green-bg: #E8F6EE; --algt-green-border: #B9E3CB; --algt-red: #B3261E; --algt-red-bg: #FDECEA; --algt-red-border: #F3C2BD; --algt-amber: #8A5B00; --algt-amber-bg: #FDF4E3; --algt-amber-border: #F0DCB0; --algt-blue: #1A4FD6; --algt-blue-bg: #EDF2FF; --algt-blue-border: #C6D6FF; /* ── Forma ─────────────────────────────────────────────────────────── 18 tarjeta · 12 control · 8 microelemento · 999 píldora. */ --algt-r: 18px; --algt-r-sm: 12px; --algt-r-xs: 8px; --algt-r-full: 999px; /* Sombras casi imperceptibles a propósito: aquí separan las cajas los bordes. La -2 se reserva para lo que de verdad flota (menús, M4). */ --algt-shadow-1: 0 1px 2px rgba(10, 10, 11, .06); --algt-shadow-2: 0 6px 20px rgba(10, 10, 11, .08); --algt-focus: 0 0 0 3px var(--algt-accent-ring); --algt-ease: .18s ease; /* Pila del sistema. Sin descarga, sin bloqueo de render, sin origen externo: el texto se pinta en el primer frame con la fuente que el usuario ya tiene. */ --algt-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --algt-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; --algt-fs-xs: .75rem; --algt-fs-sm: .82rem; --algt-fs-base: .9rem; --algt-fs-lg: 1.05rem; --algt-fs-xl: 1.35rem; --algt-fs-2xl: 1.7rem; --algt-space-1: 4px; --algt-space-2: 8px; --algt-space-3: 12px; --algt-space-4: 16px; --algt-space-5: 24px; --algt-space-6: 32px; --algt-auth-max: 440px; --algt-panel-max: 960px; /* Se consume solo en `.algt-auth-form-wrap { color-scheme: … }`. Es una variable y no un valor fijo porque `color-scheme` es lo que hace que el navegador pinte en oscuro los CONTROLES NATIVOS que no podemos tocar desde CSS: el desplegable abierto del . El color va cocido dentro del data-URI (un SVG de fondo no hereda `currentColor`), así que el bloque oscuro la reemplaza. Es la ÚNICA declaración duplicada entre temas, y por eso está en un token. */ --algt-select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2365656F' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); } /* ========================================================================= 2. MODO OSCURO ------------------------------------------------------------------------- Misma lógica, espejada: el acento pasa a ser BLANCO y el texto sobre acento, negro. No es "el tema claro con los grises invertidos" — los semánticos se sustituyen por sus versiones claras (#4ADE80 / #FCA5A5 / #FBBF24 / #93B4FF), porque #0F7A3D sobre #141417 se queda en 2.4:1 y desaparece. POR QUÉ DOS BLOQUES Y CON ESTA FORMA EXACTA: · @media (prefers-color-scheme: dark) → respeta la preferencia del sistema. Lleva `:not([data-algt-theme="light"])` para que, si el usuario FUERZA el tema claro, el sistema operativo no se lo pise. Sin ese :not(), forzar "claro" en un equipo en modo oscuro no haría nada: el media query es posterior en la cascada y ganaría siempre. · :root[data-algt-theme="dark"] → forzar oscuro gana esté como esté el SO. Con las dos piezas, el interruptor manda en AMBAS direcciones. Contrastes verificados sobre --algt-surface #141417, que es el color real de la tarjeta en oscuro (no sobre el #0A0A0B del fondo, que sería hacer trampa): texto 17.2:1 · texto-2 9.5:1 · texto-3 5.4:1 · verde 10.6:1 · rojo 9.6:1 · ámbar 11.0:1 · azul 8.9:1. ========================================================================= */ @media (prefers-color-scheme: dark) { :root:not([data-algt-theme="light"]) { --algt-bg: #0A0A0B; --algt-surface: #141417; --algt-surface-2: #1B1B1F; --algt-surface-3: #26262C; --algt-border: #2A2A31; --algt-border-strong: #3A3A44; --algt-text: #F7F7F8; --algt-text-2: #B9B9C4; /* #94949F y no #8A8A96: el gris terciario también se pinta sobre --algt-surface-3 (#26262C) —la fecha de una burbuja del equipo en el hilo de soporte y la barra de fuerza de contraseña—, y ahí el #8A8A96 daba 4,41:1, por debajo del 4,5:1 de la AA para texto pequeño. Con #94949F sube a 5,01:1 sobre surface-3 y a 6,59:1 sobre el fondo, así que el resto de usos solo mejora. */ --algt-text-3: #94949F; --algt-accent: #FFFFFF; --algt-accent-hover: #E4E4E8; --algt-accent-active: #D4D4DA; --algt-accent-soft: #1B1B1F; --algt-accent-dim: rgba(255, 255, 255, .08); --algt-accent-ring: rgba(255, 255, 255, .28); --algt-text-on-accent: #0A0A0B; --algt-green: #4ADE80; --algt-green-bg: #10231A; --algt-green-border: #1E4A32; --algt-red: #FCA5A5; --algt-red-bg: #2A1414; --algt-red-border: #5A2A2A; --algt-amber: #FBBF24; --algt-amber-bg: #251C08; --algt-amber-border: #57411A; --algt-blue: #93B4FF; --algt-blue-bg: #101A2E; --algt-blue-border: #263A63; /* En oscuro la sombra ya no separa (negro sobre negro no se ve): el peso lo sostiene el borde. Se conservan las variables para no romper a quien las consuma, pero apenas tiñen. */ --algt-shadow-1: 0 1px 2px rgba(0, 0, 0, .5); --algt-shadow-2: 0 6px 20px rgba(0, 0, 0, .6); --algt-color-scheme: dark; --algt-select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2394949F' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); } } :root[data-algt-theme="dark"] { --algt-bg: #0A0A0B; --algt-surface: #141417; --algt-surface-2: #1B1B1F; --algt-surface-3: #26262C; --algt-border: #2A2A31; --algt-border-strong: #3A3A44; --algt-text: #F7F7F8; --algt-text-2: #B9B9C4; /* Mismo valor y mismo motivo que en el bloque de prefers-color-scheme de arriba: #8A8A96 no llega a 4,5:1 sobre --algt-surface-3. */ --algt-text-3: #94949F; --algt-accent: #FFFFFF; --algt-accent-hover: #E4E4E8; --algt-accent-active: #D4D4DA; --algt-accent-soft: #1B1B1F; --algt-accent-dim: rgba(255, 255, 255, .08); --algt-accent-ring: rgba(255, 255, 255, .28); --algt-text-on-accent: #0A0A0B; --algt-green: #4ADE80; --algt-green-bg: #10231A; --algt-green-border: #1E4A32; --algt-red: #FCA5A5; --algt-red-bg: #2A1414; --algt-red-border: #5A2A2A; --algt-amber: #FBBF24; --algt-amber-bg: #251C08; --algt-amber-border: #57411A; --algt-blue: #93B4FF; --algt-blue-bg: #101A2E; --algt-blue-border: #263A63; --algt-shadow-1: 0 1px 2px rgba(0, 0, 0, .5); --algt-shadow-2: 0 6px 20px rgba(0, 0, 0, .6); --algt-color-scheme: dark; --algt-select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2394949F' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); } /* Forzar claro no necesita repetir la paleta —la de :root ya es la clara—, solo devolver el esquema de los controles nativos. */ :root[data-algt-theme="light"] { --algt-color-scheme: light; } /* ========================================================================= 3. MOVIMIENTO REDUCIDO ------------------------------------------------------------------------- Una sola línea porque TODA la animación del sistema pasa por --algt-ease. Colapsarla a 0s deja las transiciones declaradas (no hay que reescribir 40 reglas con `transition: none`) y sin embargo el cambio es instantáneo. Aquí no hay nada que quitar además de eso: este diseño no tiene movimiento decorativo, solo transiciones de color, borde y sombra. ========================================================================= */ @media (prefers-reduced-motion: reduce) { :root { --algt-ease: 0s; } } /* ========================================================================= 4. RESET SCOPED ------------------------------------------------------------------------- Solo lo imprescindible para que el tema del sitio no descoloque la tarjeta. No es un reset global: fuera de `.algt-auth-form-wrap` no se toca nada. ========================================================================= */ .algt-auth-form-wrap, .algt-auth-form-wrap *, .algt-auth-form-wrap *::before, .algt-auth-form-wrap *::after { box-sizing: border-box; } /* Los temas de WordPress reparten márgenes generosos por h2/p/ul. Dentro de la tarjeta el ritmo lo decide esta hoja, así que se ponen a cero y se reconstruye con márgenes explícitos donde toca. */ .algt-auth-form-wrap h2, .algt-auth-form-wrap p, .algt-auth-form-wrap ul, .algt-auth-form-wrap ol { margin: 0; padding: 0; } /* Los controles no heredan la tipografía por defecto: sin esto, un input dentro de una tarjeta con la pila del sistema se pinta con la fuente del navegador. */ .algt-auth-form-wrap input, .algt-auth-form-wrap select, .algt-auth-form-wrap textarea, .algt-auth-form-wrap button { font-family: inherit; font-size: 100%; line-height: inherit; margin: 0; } /* OJO: aquí NO se declara `display` sobre elementos genéricos. `` y `` son hijos directos del formulario y su ocultación viene del navegador; una regla como `.algt-auth-form-wrap input { display:block }` los revelaría como cajas vacías en mitad del formulario. */ /* ========================================================================= 5. LA TARJETA DE AUTENTICACIÓN ========================================================================= */ .algt-auth-form-wrap { /* max-width con min() para que a 320px la tarjeta encoja en vez de empujar: el requisito es que NINGUNA caja genere scroll horizontal de página. */ max-width: min(var(--algt-auth-max), 100%); margin: 0 auto; padding: var(--algt-space-6) var(--algt-space-5); background: var(--algt-surface); border: 1px solid var(--algt-border); border-radius: var(--algt-r); box-shadow: var(--algt-shadow-1); color: var(--algt-text); font-family: var(--algt-font); font-size: var(--algt-fs-base); line-height: 1.5; text-align: left; color-scheme: var(--algt-color-scheme); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* Un correo largo sin espacios (o un usuario derivado kilométrico) no puede ensanchar la tarjeta. */ overflow-wrap: break-word; } /* ── Cabecera ─────────────────────────────────────────────────────────── */ .algt-auth-form-wrap .algt-auth-header { margin: 0 0 var(--algt-space-6); text-align: center; } /* El icono se mete en una ficha cuadrada de 44px: el SVG llega con width/height 32 en el atributo, pero `box-sizing: border-box` del reset hace que el padding coma hacia dentro y el dibujo quede en 22px dentro de un marco de 44. Es el único adorno de la pantalla y sostiene solo con borde y superficie. El color sale de `color` porque los tres SVG llevan stroke="currentColor"; en la hoja original el icono traía #c9a227 clavado en el atributo y ninguna regla podía cambiarlo — ni el rebranding a negro ni el modo oscuro. */ .algt-auth-form-wrap .algt-auth-icon { display: block; width: 44px; height: 44px; padding: 10px; margin: 0 auto var(--algt-space-3); color: var(--algt-text); background: var(--algt-surface-2); border: 1px solid var(--algt-border); border-radius: var(--algt-r-sm); } /* Título apretado: -0.02em es lo que separa un titular "de web" de uno "de producto". El peso hace la jerarquía; el color no cambia. */ .algt-auth-form-wrap .algt-auth-title { margin: 0 0 var(--algt-space-1); color: var(--algt-text); font-size: var(--algt-fs-2xl); font-weight: 650; line-height: 1.15; letter-spacing: -.02em; } .algt-auth-form-wrap .algt-auth-subtitle { margin: 0; color: var(--algt-text-2); font-size: var(--algt-fs-base); line-height: 1.45; } /* ========================================================================= 6. ESTRUCTURA DEL FORMULARIO ========================================================================= */ /* Ritmo vertical por "lechuza": margen ARRIBA a todo hijo directo menos al primero. Se hace así, y no con `display: flex` + `gap`, por una razón concreta del contrato de DOM: `#algt-login-form`, `#algt-forgot-form` y los tres `.algt-msg` se ocultan con el ATRIBUTO hidden. Cualquier `display` que esta hoja pusiera sobre ellos competiría con `[hidden]` y los dejaría visibles. Con márgenes, `display` sigue siendo asunto exclusivo del atributo. */ .algt-auth-form-wrap .algt-auth-form > * { margin-top: var(--algt-space-4); margin-bottom: 0; } .algt-auth-form-wrap .algt-auth-form > :first-child { margin-top: 0; } /* El texto de ayuda de "Recordarme" es hermano de la casilla a nivel de formulario, no un hijo del grupo: sin esto se le aplicarían los 16px de la lechuza y quedaría flotando lejos de aquello que explica. */ .algt-auth-form-wrap .algt-form-check + .algt-form-help { margin-top: var(--algt-space-1); } .algt-auth-form-wrap .algt-form-group { margin: 0; } /* Nombre y apellido. En cuanto el espacio aprieta pasa a una columna (ver §12): dos campos de 90px de ancho no son un formulario, son un acertijo. */ .algt-auth-form-wrap .algt-auth-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--algt-space-3); } /* Separador entre datos personales y credenciales. 1px y nada más: es el mismo recurso que separa la tarjeta del fondo, usado a otra escala. */ .algt-auth-form-wrap .algt-auth-divider { height: 1px; background: var(--algt-border); border: 0; } .algt-auth-form-wrap .algt-auth-alt, .algt-auth-form-wrap .algt-auth-actions { margin: var(--algt-space-4) 0 0; color: var(--algt-text-2); font-size: var(--algt-fs-sm); text-align: center; } .algt-auth-form-wrap .algt-auth-link { color: var(--algt-text); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; border-radius: var(--algt-r-xs); transition: color var(--algt-ease); } .algt-auth-form-wrap .algt-auth-link:hover { color: var(--algt-accent-hover); } .algt-auth-form-wrap .algt-auth-link:focus-visible { outline: 2px solid var(--algt-accent); outline-offset: 2px; box-shadow: var(--algt-focus); } /* ── Etiquetas y ayudas ───────────────────────────────────────────────── */ /* Vale tanto para