/* ============================================================================ TEMA — portal-brand (identidad del portal de clientes) ---------------------------------------------------------------------------- Sigue la convención de temas de ABAKU (assets/css/conventions/themes.md): un tema SÓLO redefine tokens --abk-*; jamás toca CSS de módulo. ── De dónde salen estos colores ───────────────────────────────────────── Del isotipo, no de una paleta inventada. El logo es un gradiente diagonal violeta→índigo con UNA cuenta cian arriba: #a855f7 violeta claro → --abk-primary-3 #6d28d9 violeta medio → --abk-primary-2 (color de marca dominante) #4338ca índigo profundo → --abk-primary-deep #22d3ee cian del punto → --abk-accent (el que nadie más usa) ── Por qué no reutiliza cosmic-blue ───────────────────────────────────── cosmic-blue lava TODAS las superficies con violeta (--abk-surface #f3f0fe en claro, #281c60 en oscuro). En un panel interno donde uno pasa el día eso da carácter; en el portal de un cliente que entra dos minutos a pagar, ensucia el contraste y hace que todo se lea apagado. Aquí las superficies son limpias y el color se gasta donde significa algo: la marca, el estado de un cargo, el botón que hay que pulsar. El cian es la palanca de identidad. En cosmic-blue es decorativo; aquí carga los estados activos, el foco y la franja del módulo — es lo que hace que el portal no se sienta "otro panel más". ============================================================================ */ /* ═══════════════════════════════════════════════════════════════════════════ COMÚN A AMBOS MODOS — rampa de marca y acentos ═════════════════════════════════════════════════════════════════════════ */ html[data-abk-variant="brand"] { /* ── Primary: el gradiente del isotipo, tal cual ── */ --abk-primary: #7c3aed; /* violet-600 — el punto medio legible */ --abk-primary-2: #6d28d9; /* violet-700 — parada media del logo */ --abk-primary-3: #a855f7; /* purple-500 — parada clara del logo */ --abk-primary-deep: #4338ca; /* indigo-700 — parada oscura del logo */ --abk-primary-soft: #ddd6fe; /* violet-200 */ --abk-primary-ink: #2e1065; /* violet-950 */ --abk-primary-glow: color-mix(in oklch, #a855f7 38%, transparent); /* Tinta sobre el primary: el violeta es oscuro, así que va blanca. (Ver themes.md regla 1: esto es SÓLO tinta sobre relleno primary.) */ --abk-text-on-primary: #ffffff; --abk-on-primary: #ffffff; /* ── Accent: el cian del isotipo, protagonista ── */ --abk-accent: #22d3ee; /* cyan-400 — el punto del logo */ --abk-accent-2: #06b6d4; /* cyan-500 — para texto sobre claro */ --abk-accent-soft: #a5f3fc; /* cyan-200 */ --abk-accent-glow: color-mix(in oklch, #22d3ee 45%, transparent); /* Degradados de marca: la diagonal del isotipo. */ --abk-grad-primary: linear-gradient(135deg, #a855f7 0%, #6d28d9 58%, #4338ca 100%); /* Tinta sobre el gradiente. NO es --abk-text-on-primary: ése se invierte a oscuro en modo oscuro (porque ahí el primary sube a violet-400), mientras que el gradiente sigue siendo oscuro en ambos modos. Usar on-primary aquí dejaría texto oscuro sobre violeta oscuro. */ --abk-grad-ink: #ffffff; /* Base del panel de marca del login. Va PROFUNDA aunque el modo sea claro: encima se mueven las manchas de luz de .my-aurora, y sobre el degradado brillante que había antes (violeta→cian a plena saturación) no se veía ninguna — quedaba un bloque de color quieto. Con la base honda, el mismo violeta y el mismo cian de la marca se leen como luz que se desplaza. El formulario de al lado sigue claro: la pantalla parte en dos a propósito. */ --abk-grad-hero: linear-gradient(140deg, #3a1f8f 0%, #241466 46%, #10364f 100%); --abk-grad-text: linear-gradient(120deg, #6d28d9, #22d3ee); /* Franja superior del módulo: violeta que muere en cian. (themes.md: prohibido meter aquí un color fijo ajeno al tema.) */ --abk-module-topbar-h: 3px; --abk-module-topbar: linear-gradient(90deg, var(--abk-primary-3), var(--abk-primary-deep) 55%, var(--abk-accent)); /* Radios ligeramente más suaves que el panel interno: el portal se lee más como producto de cara al cliente que como consola. */ --abk-radius-sm: 10px; --abk-radius: 14px; --abk-radius-lg: 20px; --abk-border-radius: 14px; } /* ═══════════════════════════════════════════════════════════════════════════ MODO CLARO — superficies limpias, color sólo donde significa ═════════════════════════════════════════════════════════════════════════ */ html[data-abk-variant="brand"]:not([data-theme="dark"]) { /* Lienzo con un velo violeta MUY leve (2-3%), no el lavado de cosmic. */ --abk-bg: #ffffff; --abk-bg-2: #fbfaff; --abk-bg-shell: #f7f6fd; --abk-surface: #ffffff; --abk-surface-2: #f6f4ff; --abk-surface-overlay: rgba(46,16,101,.42); --abk-glass-bg: rgba(255,255,255,.72); --abk-glass-border: rgba(124,58,237,.16); --abk-text: #1e1b3a; --abk-text-soft: #4c4870; --abk-text-muted: #6b6890; --abk-text-on-shell: #1e1b3a; --abk-text-heading: #2e1065; /* violet-950 — títulos con peso de marca */ --abk-text-heading-soft: #4c1d95; --abk-text-link: #6d28d9; /* Bordes tintados de violeta pero discretos: dan familia sin ensuciar. */ --abk-border-soft: rgba(124,58,237,.10); --abk-border-section: rgba(124,58,237,.18); --abk-border-strong: rgba(124,58,237,.34); --abk-border-2: rgba(124,58,237,.18); --abk-input-bg: #ffffff; --abk-input-bg-soft: #f6f4ff; --abk-input-border: rgba(124,58,237,.24); --abk-input-text: #1e1b3a; --abk-input-placeholder: #8b88ab; --abk-input-border-focus:#22d3ee; /* el foco es CIAN: se ve al instante */ --abk-input-ring: color-mix(in oklch, #22d3ee 32%, transparent); --abk-bg-tint-primary: color-mix(in oklch, #a855f7 9%, transparent); /* Sombras violetas y suaves; nada de gris sucio. */ --abk-shadow-1: 0 1px 2px rgba(46,16,101,.05), 0 4px 14px rgba(124,58,237,.07); --abk-shadow-2: 0 4px 18px rgba(124,58,237,.11), 0 1px 3px rgba(46,16,101,.06); --abk-shadow-3: 0 10px 30px rgba(124,58,237,.16), 0 2px 8px rgba(46,16,101,.07); --abk-shadow-modal: 0 24px 70px rgba(46,16,101,.22), 0 8px 26px rgba(46,16,101,.14); --abk-shadow-glow: 0 0 0 1px var(--abk-accent), 0 0 20px var(--abk-accent-glow); /* Estados: saturados de verdad. En un portal de cobro, "vencido" tiene que leerse vencido de un vistazo. */ --abk-ok: #10b981; --abk-ok-strong: #047857; --abk-ok-bg: #ecfdf5; --abk-ok-glow: color-mix(in oklch, #10b981 30%, transparent); --abk-warn: #f59e0b; --abk-warn-strong: #b45309; --abk-warn-bg: #fffbeb; --abk-warn-glow: color-mix(in oklch, #f59e0b 30%, transparent); --abk-err: #f43f5e; /* rose-500: se separa del violeta mejor que el rojo puro */ --abk-err-strong: #be123c; --abk-err-bg: #fff1f3; --abk-err-glow: color-mix(in oklch, #f43f5e 30%, transparent); --abk-info: #06b6d4; --abk-info-strong: #0e7490; --abk-info-bg: #ecfeff; --abk-cat-violet: #7c3aed; --abk-cat-blue: #3b82f6; --abk-cat-emerald: #10b981; --abk-cat-amber: #f59e0b; --abk-cat-pink: #ec4899; --abk-cat-slate: #64748b; } /* ═══════════════════════════════════════════════════════════════════════════ MODO OSCURO — azul de medianoche, ni morado lavado ni negro ───────────────────────────────────────────────────────────────────────── Dos intentos antes de éste. El primero pintaba el lienzo con el índigo del logo (#171334): sobre pantalla entera no se lee "oscuro", se lee morado lavado. El segundo se fue al casi-negro (#060509): oscuro sí, pero el negro apaga el color de todo lo que se le pone encima y la pantalla queda muerta. Éste vive en medio: azul de medianoche. Nada baja de ~10% de luminosidad, así que sigue siendo un oscuro de verdad, pero el canal azul se mantiene muy por encima del rojo — el ojo lo lee como color, no como ausencia de luz. Y el azul es exactamente el punto medio entre el violeta y el cian de la marca: ambos acentos caen encima como si pertenecieran ahí, cosa que sobre negro neutro no pasaba. La jerarquía sigue subiendo escalón a escalón — shell < contenido < tarjeta < tarjeta alterna — que es lo que distingue las secciones sin bordes. Ojo con themes.md regla 2: sobre superficie muy oscura, los alphas de texto suben (.72/.88), no se quedan en los de un gris claro. ═════════════════════════════════════════════════════════════════════════ */ html[data-abk-variant="brand"][data-theme="dark"] { --abk-bg: #0e1630; --abk-bg-2: #121b3a; --abk-bg-shell: #090f22; /* el más hondo: el marco de todo */ --abk-surface: #111a38; /* la tarjeta, un escalón sobre el fondo */ --abk-surface-2: #17224a; /* zonas hundidas dentro de una tarjeta */ --abk-surface-overlay: rgba(4,7,18,.80); --abk-glass-bg: rgba(14,22,48,.76); --abk-glass-border: rgba(148,163,255,.20); --abk-text: #ece9ff; --abk-text-soft: rgba(236,233,255,.80); --abk-text-muted: rgba(236,233,255,.62); --abk-text-on-shell: #ece9ff; --abk-text-heading: #c4b5fd; --abk-text-heading-soft: #ddd6fe; --abk-text-link: #67e8f9; /* en oscuro el enlace va cian: contrasta */ --abk-primary: #a78bfa; /* sube un paso: el violet-600 se hunde en índigo */ --abk-primary-2: #8b5cf6; --abk-primary-3: #c4b5fd; --abk-primary-soft: #ddd6fe; --abk-text-on-primary: #1a1038; /* primary claro ⇒ tinta OSCURA (themes.md §1) */ --abk-on-primary: #1a1038; --abk-accent: #67e8f9; --abk-accent-2: #22d3ee; --abk-accent-soft: #a5f3fc; --abk-accent-glow: color-mix(in oklch, #67e8f9 50%, transparent); /* Bordes de un pelo. Sobre azul profundo un borde opaco se ve pegado; lo que define el canto de una tarjeta es un filo de luz fría, no una línea. */ --abk-border-soft: rgba(160,180,255,.11); --abk-border-section: rgba(160,180,255,.20); --abk-border-strong: rgba(190,205,255,.36); --abk-border-2: rgba(160,180,255,.20); --abk-input-bg: #0d1530; --abk-input-bg-soft: #17224a; --abk-input-border: rgba(160,180,255,.24); --abk-input-text: #ece9ff; --abk-input-placeholder: rgba(236,233,255,.42); --abk-input-border-focus:#67e8f9; --abk-input-ring: color-mix(in oklch, #67e8f9 34%, transparent); /* Baja de 16% a 10%: sobre negro, el mismo tinte se veía como un parche. */ --abk-bg-tint-primary: color-mix(in oklch, #a78bfa 10%, transparent); /* La sombra es azul, no negra: una sombra negra sobre azul profundo hace un halo sucio alrededor de cada tarjeta. Siendo del mismo tono que el fondo, sólo hunde. Y el anillo de 1px es lo que de verdad recorta el canto. */ --abk-shadow-1: 0 2px 12px rgba(3,7,20,.55), 0 0 0 1px rgba(160,180,255,.08); --abk-shadow-2: 0 10px 28px rgba(3,7,20,.60), 0 0 0 1px rgba(160,180,255,.11); --abk-shadow-3: 0 18px 44px rgba(3,7,20,.66), 0 0 28px rgba(103,232,249,.09); --abk-shadow-modal: 0 30px 80px rgba(2,5,14,.78), 0 10px 30px rgba(3,7,20,.6); --abk-shadow-glow: 0 0 0 1px var(--abk-accent), 0 0 22px var(--abk-accent-glow); --abk-ok: #34d399; --abk-ok-strong: #6ee7b7; --abk-ok-bg: color-mix(in oklch, #34d399 16%, transparent); --abk-warn: #fbbf24; --abk-warn-strong: #fcd34d; --abk-warn-bg: color-mix(in oklch, #fbbf24 16%, transparent); --abk-err: #fb7185; --abk-err-strong: #fda4af; --abk-err-bg: color-mix(in oklch, #fb7185 16%, transparent); --abk-info: #22d3ee; --abk-info-strong: #67e8f9; --abk-info-bg: color-mix(in oklch, #22d3ee 14%, transparent); --abk-cat-violet: #a78bfa; --abk-cat-blue: #60a5fa; --abk-cat-emerald: #34d399; --abk-cat-amber: #fbbf24; --abk-cat-pink: #f472b6; --abk-cat-slate: #94a3b8; /* ── Degradados en oscuro ────────────────────────────────────────────── El panel de marca del login usa --abk-grad-hero. Si se queda con el degradado del modo claro, la mitad izquierda sigue brillando mientras la derecha se apaga: el modo oscuro se ve a medias y la pantalla se parte en dos temperaturas. Aquí baja a índigo profundo, misma diagonal, y el cian pasa a ser el único punto luminoso. */ --abk-grad-primary: linear-gradient(135deg, #6d28d9 0%, #4c1d95 55%, #2e1065 100%); /* Base del panel de login: MORADA, no azul. El azul de medianoche es el color del portal por dentro — ahí se pasa el rato y conviene que sea sobrio. La pantalla de acceso es lo contrario: dura veinte segundos y es la única que tiene que dejar recuerdo de marca, así que va con el violeta del isotipo a plena voz. El tramo final se abre a teal para que el cian de la cuenta del logo tenga de dónde salir. Honda pero no negra: la luz la ponen las capas animadas de .my-aurora, y si el degradado ya viniera encendido no se vería moverse nada encima. */ --abk-grad-hero: linear-gradient(140deg, #3b1d8a 0%, #1e0f4d 46%, #10314f 100%); --abk-grad-text: linear-gradient(120deg, #c4b5fd, #67e8f9); --abk-grad-ink: #ece9ff; }