/* tokens.css */ /* ============================================================= CryptoSwap — Design Tokens Paleta monocromática dark con acentos semánticos. Overrideable: el color primario se inyecta inline desde base.html (vía env BRAND_PRIMARY_COLOR) al final de . ============================================================= */ :root { color-scheme: dark; /* Backgrounds */ --bg-base: #000000; --bg-card: #0A0A0A; --bg-card-alt: #0F0F0F; --bg-hover: #141414; /* Borders */ --border: #1F1F1F; --border-hover: #2A2A2A; --border-focus: #EDEDED; /* Text */ --text-primary: #EDEDED; --text-secondary: #A1A1A1; --text-muted: #888888; --text-dim: #666666; --text-faint: #555555; --text-ghost: #333333; /* Semantic — uso MUY restringido */ --accent-live: #22c55e; /* status verde "en vivo" / OK */ --accent-danger: #ef4444; /* validaciones de error */ --accent-danger-ink: #f87171;/* rojo de texto sobre fondo oscuro (más claro que danger) */ --accent-warn: #fbbf24; /* warnings */ --accent-info: #22d3ee; /* info / cyan */ /* Botón primario (acción "go") — antes hardcodeado en cada plantilla del alta */ --btn-go-a: #34d67a; /* gradiente arriba */ --btn-go-b: #1fae5e; /* gradiente abajo */ --btn-go-ink: #03140a; /* texto sobre el verde */ /* Brand (overrideable vía env) — Bloomberg Terminal palette */ --brand-primary: #ff6b00; --brand-primary-hover: #ff8838; --brand-primary-subtle: rgba(255, 107, 0, 0.12); --brand-primary-contrast: #000000; /* Radii — Bloomberg uses sharp panels */ --radius-sm: 0px; --radius-md: 2px; --radius-lg: 3px; --radius-xl: 4px; --radius-2xl: 6px; /* Fonts — JetBrains Mono everywhere, Archivo for display */ --font-sans: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; --font-serif: 'Archivo', 'Inter', system-ui, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; --font-display: 'Archivo', 'Inter', system-ui, sans-serif; } /* Aplicar la fuente global al body para que el cambio cascadee */ html, body { font-family: var(--font-sans); font-feature-settings: "ss01", "ss02"; } h1, h2, h3, h4, h5, h6, .brand-title, .display, .h-display { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.02em; } /* themes.css */ /* ============================================================= Temas del backoffice — se cargan DESPUÉS de tokens.css. El lleva SIEMPRE data-theme (default: clamp). Cada tema redefine el set completo de tokens; las pantallas no saben de temas, solo consumen var(--*). · clamp — claro editorial (ADN de www.clamp.cl): papel, Geist + Instrument Serif, microetiquetas mono, naranja clay solo donde hay acción. [DEFAULT] · bloomberg — la terminal oscura original, preservada 1:1 con los valores históricos de tokens.css. · grafito — oscuro corporativo suave: pizarra azulada, acento azul, esquinas redondeadas. Punto medio. ============================================================= */ /* ── CLAMP · claro editorial (default) ─────────────────────── */ [data-theme="clamp"] { color-scheme: light; /* Fondo BLANCO (decisión del user). Las superficies NO se separan por tono sino por LÍNEA: el sidebar tiene border-right, las cards borde, y la barra de KPIs divisores de 1px. Por eso base y card pueden ser ambos blancos sin que nada se pierda. Se conserva el ADN de la marca en tinta, neutros tibios y el naranja "signal". */ --bg-base: #FFFFFF; /* fondo blanco */ --bg-card: #FFFFFF; /* cards y sidebar: definidos por borde */ --bg-card-alt: #F6F5F2; /* superficie alterna: inputs, zebra, base del skeleton */ --bg-hover: #ECEBE7; /* hover/activo: visible sobre blanco y da contraste al shimmer */ --border: #E5E3DE; --border-hover: #D3D0CA; --border-focus: #131313; /* --color-ink */ --text-primary: #131313; /* --color-ink */ --text-secondary: #3A3633; /* --color-ink-soft */ /* muted/dim/faint en taupe y oscurecidos para cumplir WCAG AA (≥4.5:1) sobre el papel más cálido (#EFE9DD), manteniendo la jerarquía */ --text-muted: #625D54; --text-dim: #6B655A; --text-faint: #6F6959; --text-ghost: #CFC8B8; --accent-live: #4D6B3F; /* --color-moss (verde = estado/live, nunca acción) */ /* danger se mantiene rojo-teja DISTINTO del signal naranja, a propósito: en el camino de la plata, "peligro" no puede confundirse con "acción de marca" */ --accent-danger: #B4321E; --accent-warn: #795726; /* bronce, oscurecido para WCAG AA sobre el papel */ --accent-info: #185FA5; /* info semántico; clamp.cl no tiene azul, pero NO es el acento visible (ese es el signal naranja) */ --brand-primary: #FF4500; /* --color-signal (el acento de marca) */ --brand-primary-hover: #E03D00; --brand-primary-subtle: rgba(255, 69, 0, 0.10); --brand-primary-contrast: #FFFFFF; /* CERO radios: clamp.cl no tiene ni uno (los dots usan 50% inline, no el token). El sistema se separa por LÍNEA de 1px, no por esquinas blandas. Un radio de 6px en un botón es lo primero que rompe la ilusión. */ --radius-sm: 0px; --radius-md: 0px; --radius-lg: 0px; --radius-xl: 0px; --radius-2xl: 0px; --font-sans: 'Geist', 'Helvetica Neue', 'Inter', system-ui, sans-serif; --font-display: 'Geist', 'Helvetica Neue', 'Inter', system-ui, sans-serif; --font-serif: 'Instrument Serif', Georgia, serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; } /* Titulares del tema, fieles a www.clamp.cl. Su

real es: class="font-display font-medium tracking-[-0.035em] leading-[0.92]" → Geist (NO serif) en peso 500. Pesa por TAMAÑO, no por grosor. El serif (Instrument Serif) tiene UN SOLO trabajo en la marca: el LOGOTIPO en itálica (.italic-serif en clamp.cl). Por eso NO va en los titulares. */ [data-theme="clamp"] h1, [data-theme="clamp"] h2, [data-theme="clamp"] h3, [data-theme="clamp"] h4, [data-theme="clamp"] h5, [data-theme="clamp"] h6, [data-theme="clamp"] .display, [data-theme="clamp"] .h-display, [data-theme="clamp"] .page-head h1 { font-family: var(--font-display); /* clamp.cl compila SOLO dos pesos: 300 y 500. Bold está PROHIBIDO — un h1 en 700 delata al instante que no es Clamp. El énfasis se hace con tamaño y tracking negativo. tokens.css pone 700 a todos los h1-h6: acá se corrige. */ font-weight: 500; letter-spacing: -0.035em; } /* P0.4 — Botones en JetBrains Mono, no en Geist: "es LA diferencia entre plano técnico y SaaS genérico". Spec: mono / .7rem / +.22em / uppercase / medium, sin radio y sin sombra. Scoped a clamp para no tocar los temas oscuros. */ [data-theme="clamp"] .btn, [data-theme="clamp"] .btn-primary, [data-theme="clamp"] .btn-secondary, [data-theme="clamp"] .btn-brand, [data-theme="clamp"] .btn-ghost, [data-theme="clamp"] .btn-neon, [data-theme="clamp"] .btn-outline-primary, [data-theme="clamp"] .btn-outline-secondary, [data-theme="clamp"] .btn-outline-light { font-family: var(--font-mono); font-weight: 500; font-size: 0.7rem; letter-spacing: 0.22em; text-transform: uppercase; box-shadow: none; } /* P0 — numerales gigantes en Geist 300 (light). El contraste 300-gigante vs 400-body ES la textura de clamp.cl. */ [data-theme="clamp"] .stat-value, [data-theme="clamp"] .hero-val, [data-theme="clamp"] .display-mega, [data-theme="clamp"] .display-giant { font-weight: 300; letter-spacing: -0.035em; } /* EL logotipo: único lugar del serif, en itálica, como en clamp.cl */ [data-theme="clamp"] .brand-title, [data-theme="clamp"] .sidebar-brand { font-family: var(--font-serif); font-style: italic; font-weight: 400; text-transform: none; letter-spacing: -0.01em; } /* ── BLOOMBERG · terminal oscura original (preservada) ─────── */ [data-theme="bloomberg"] { color-scheme: dark; --bg-base: #000000; --bg-card: #0A0A0A; --bg-card-alt: #0F0F0F; --bg-hover: #141414; --border: #1F1F1F; --border-hover: #2A2A2A; --border-focus: #EDEDED; --text-primary: #EDEDED; --text-secondary: #A1A1A1; --text-muted: #888888; --text-dim: #666666; --text-faint: #555555; --text-ghost: #333333; --accent-live: #22c55e; --accent-danger: #ef4444; --accent-warn: #fbbf24; --accent-info: #22d3ee; --brand-primary: #ff6b00; --brand-primary-hover: #ff8838; --brand-primary-subtle: rgba(255, 107, 0, 0.12); --brand-primary-contrast: #000000; --radius-sm: 0px; --radius-md: 2px; --radius-lg: 3px; --radius-xl: 4px; --radius-2xl: 6px; --font-sans: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; --font-display: 'Archivo', 'Inter', system-ui, sans-serif; --font-serif: 'Archivo', 'Inter', system-ui, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; } /* ── GRAFITO · oscuro corporativo suave (nuevo) ────────────── */ [data-theme="grafito"] { color-scheme: dark; --bg-base: #0F1216; --bg-card: #161B22; --bg-card-alt: #1B212A; --bg-hover: #212936; --border: #252D39; --border-hover: #313B4B; --border-focus: #B5D4F4; --text-primary: #E9EDF3; --text-secondary: #A8B1BE; --text-muted: #8B95A3; --text-dim: #6B7482; --text-faint: #565E6B; --text-ghost: #3A414D; --accent-live: #34d399; --accent-danger: #f87171; --accent-warn: #fbbf24; --accent-info: #60a5fa; --brand-primary: #378ADD; --brand-primary-hover: #5CA2E8; --brand-primary-subtle: rgba(55, 138, 221, 0.14); --brand-primary-contrast: #06121F; --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; --radius-xl: 10px; --radius-2xl: 14px; --font-sans: 'Inter', system-ui, sans-serif; --font-display: 'Inter', system-ui, sans-serif; --font-serif: 'Inter', system-ui, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; } [data-theme="grafito"] h1, [data-theme="grafito"] h2, [data-theme="grafito"] h3 { font-weight: 600; letter-spacing: -0.02em; } /* ── BRUTALIST · swiss punk (papel, bordes negros, sombras duras) ── */ [data-theme="brutalist"] { color-scheme: light; --bg-base: #F4F0E6; --bg-card: #FFFFFF; --bg-card-alt: #F4F0E6; --bg-hover: #FFE98A; --border: #111111; --border-hover: #111111; --border-focus: #111111; --text-primary: #111111; --text-secondary: #333333; --text-muted: #555555; --text-dim: #777777; --text-faint: #999999; --text-ghost: #CCCCCC; --accent-live: #00A35A; --accent-danger: #FF3B1F; --accent-warn: #C77E00; --accent-info: #1A56FF; --brand-primary: #FF3B1F; --brand-primary-hover: #E6301A; --brand-primary-subtle: rgba(255, 59, 31, 0.12); --brand-primary-contrast: #FFFFFF; --radius-sm: 0px; --radius-md: 0px; --radius-lg: 0px; --radius-xl: 0px; --radius-2xl: 0px; --font-sans: 'Inter', system-ui, sans-serif; --font-display: 'Inter', system-ui, sans-serif; --font-serif: 'Inter', system-ui, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; } [data-theme="brutalist"] h1, [data-theme="brutalist"] h2, [data-theme="brutalist"] h3 { font-weight: 800; letter-spacing: -0.03em; } [data-theme="brutalist"] .card, [data-theme="brutalist"] .panel, [data-theme="brutalist"] .aml-panel, [data-theme="brutalist"] .stat, [data-theme="brutalist"] .ocard { border-width: 2px !important; box-shadow: 3px 3px 0 var(--text-primary) !important; } /* ── CRT · fósforo verde (terminal retro) ─────────────────── */ [data-theme="crt"] { color-scheme: dark; --bg-base: #010A03; --bg-card: #04140A; --bg-card-alt: #061C0D; --bg-hover: #0A2814; --border: #14612F; --border-hover: #1F9E52; --border-focus: #2FE86A; --text-primary: #2FE86A; --text-secondary: #22B552; --text-muted: #1F9E52; --text-dim: #178040; --text-faint: #106030; --text-ghost: #0A3D1F; --accent-live: #2FE86A; --accent-danger: #FF5F56; --accent-warn: #EAFF6B; --accent-info: #5DF2C8; --brand-primary: #2FE86A; --brand-primary-hover: #5DF28A; --brand-primary-subtle: rgba(47, 232, 106, 0.14); --brand-primary-contrast: #010A03; --radius-sm: 0px; --radius-md: 0px; --radius-lg: 0px; --radius-xl: 0px; --radius-2xl: 0px; --font-sans: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; --font-display: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; --font-serif: 'JetBrains Mono', ui-monospace, monospace; --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; } [data-theme="crt"] .admin-content { text-shadow: 0 0 3px rgba(47, 232, 106, 0.35); } /* ── GLASS · aurora / vidrio esmerilado ───────────────────── */ [data-theme="glass"] { color-scheme: dark; --bg-base: #0B1020; --bg-card: rgba(255, 255, 255, 0.06); --bg-card-alt: rgba(255, 255, 255, 0.03); --bg-hover: rgba(255, 255, 255, 0.10); --border: rgba(255, 255, 255, 0.14); --border-hover: rgba(255, 255, 255, 0.24); --border-focus: #5EEAD4; --text-primary: #F0F0FF; --text-secondary: #C4C2E0; --text-muted: #A7A5C8; --text-dim: #8886AC; --text-faint: #6B6990; --text-ghost: #3A3860; --accent-live: #5EEAD4; --accent-danger: #FB7185; --accent-warn: #FCD34D; --accent-info: #818CF8; --brand-primary: #5EEAD4; --brand-primary-hover: #99F6E4; --brand-primary-subtle: rgba(94, 234, 212, 0.16); --brand-primary-contrast: #0B1020; --radius-sm: 6px; --radius-md: 8px; --radius-lg: 10px; --radius-xl: 12px; --radius-2xl: 16px; --font-sans: 'Inter', system-ui, sans-serif; --font-display: 'Inter', system-ui, sans-serif; --font-serif: 'Inter', system-ui, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; } [data-theme="glass"] body { background: radial-gradient(120% 90% at 12% 0%, #3B2F6B 0%, #14122A 45%, #0B1020 100%) fixed; } [data-theme="glass"] .card, [data-theme="glass"] .panel, [data-theme="glass"] .aml-panel, [data-theme="glass"] .admin-sidebar { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } /* ── MAGAZINE · editorial serif, tipografía grande ────────── */ [data-theme="magazine"] { color-scheme: light; --bg-base: #FAF9F6; --bg-card: #FFFFFF; --bg-card-alt: #F4F2EC; --bg-hover: #EFECE4; --border: #DDD9CF; --border-hover: #1A1A1A; --border-focus: #1A1A1A; --text-primary: #1A1A1A; --text-secondary: #4A4640; --text-muted: #6D6860; --text-dim: #999288; --text-faint: #BDB8AC; --text-ghost: #E0DCD2; --accent-live: #1D7D4D; --accent-danger: #B4321E; --accent-warn: #B07219; --accent-info: #2A5A8A; --brand-primary: #C53929; --brand-primary-hover: #A82A1B; --brand-primary-subtle: rgba(197, 57, 41, 0.10); --brand-primary-contrast: #FFFFFF; --radius-sm: 2px; --radius-md: 2px; --radius-lg: 3px; --radius-xl: 4px; --radius-2xl: 6px; --font-sans: 'Inter', system-ui, sans-serif; --font-display: 'Instrument Serif', Georgia, 'Times New Roman', serif; --font-serif: 'Instrument Serif', Georgia, serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; } [data-theme="magazine"] h1, [data-theme="magazine"] .page-title, [data-theme="magazine"] .det-hero-amt, [data-theme="magazine"] .ocard-amt { font-family: var(--font-display) !important; letter-spacing: -0.02em; } /* ============================================================= P1 · Marca clamp.cl aplicada al backoffice (ver ~/clamp-brand/SPEC-CLAMP-CL.md) ============================================================= */ /* P0.5 — Numeración de módulos (CD-00X), el recurso más distintivo y barato de clamp.cl: cada vista es una entrada de catálogo. Los HUECOS (falta 003, 006, 009…) son deliberados: hacen que el sistema parezca más viejo y más grande. */ [data-theme="clamp"] .sidebar-link .cd-code { margin-left: auto; font-family: var(--font-mono); font-size: 0.55rem; letter-spacing: 0.22em; color: var(--text-ghost); transition: color .18s ease; } [data-theme="clamp"] .sidebar-link:hover .cd-code { color: var(--text-dim); } [data-theme="clamp"] .sidebar-link.active .cd-code { color: var(--brand-primary); } /* en los otros temas el código no aporta: se oculta y no ensucia */ :where([data-theme]:not([data-theme="clamp"])) .sidebar-link .cd-code { display: none; } /* P1.10 — Foco y selección. El spec reserva --color-rust (#c2410c) como color de SISTEMA (no de marca) justo para esto: así el foco no compite con el signal, que marca acción. Antes: solo los .btn tenían focus-visible. */ [data-theme="clamp"] :focus-visible { outline: 2px solid #c2410c; outline-offset: 3px; border-radius: 1px; } [data-theme="clamp"] ::selection { background: #c2410c; color: #efe9dd; } /* P1.7 — Header de tabla como label mono (.62rem/+.22em), no bold. Panel sin sombra, separado por línea. */ [data-theme="clamp"] .table thead th, [data-theme="clamp"] .portal-table thead th { font-family: var(--font-mono); font-size: 0.62rem; font-weight: 400; letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-dim) !important; } /* items-baseline, nunca items-center: el código mono y la descripción alinean por su línea base, no por su caja. */ [data-theme="clamp"] .table tbody td, [data-theme="clamp"] .portal-table tbody td { vertical-align: baseline; } /* P1.8 — Badges semánticos: borde + tinte 10% + texto del mismo color. La marca ya reservó estos 4 (signal/rust/bronze/moss); se leen sin depender del relleno. */ [data-theme="clamp"] .badge.bg-success { background: rgba(77,107,63,.10) !important; border: 1px solid var(--accent-live); color: var(--accent-live) !important; } [data-theme="clamp"] .badge.bg-warning { background: rgba(121,87,38,.10) !important; border: 1px solid var(--accent-warn); color: var(--accent-warn) !important; } [data-theme="clamp"] .badge.bg-danger { background: rgba(180,50,30,.10) !important; border: 1px solid var(--accent-danger); color: var(--accent-danger) !important; } [data-theme="clamp"] .badge.bg-info { background: rgba(24,95,165,.10) !important; border: 1px solid var(--accent-info); color: var(--accent-info) !important; } /* ═══════════════════════════════════════════════════════════════ CATÁLOGO 20 (14-jul-2026) — temas elegidos por el user desde las maquetas de las landings, para asignar por mesa. Solo tokens: las pantallas no saben de temas. Parentescos deliberados: neobrutal≈brutalist · mision≈crt · vidrio≈glass. ═══════════════════════════════════════════════════════════════ */ /* ── ORO SOBRE NEGRO · banca privada ───────────────────────── */ [data-theme="oro"] { color-scheme: dark; --bg-base: #0B0A08; --bg-card: #121008; --bg-card-alt: #17140B; --bg-hover: #1D1910; --border: #2A2620; --border-hover: #3A3426; --border-focus: #C9A227; --text-primary: #E9E2D0; --text-secondary: #C9C0A8; --text-muted: #A89F87; --text-dim: #8D8672; --text-faint: #6B6455; --text-ghost: #403B2E; --accent-live: #9FC98F; --accent-danger: #E24B4A; --accent-warn: #EAC26A; --accent-info: #85B7EB; --brand-primary: #C9A227; --brand-primary-hover: #DDB83C; --brand-primary-subtle: rgba(201,162,39,.14); --brand-primary-contrast: #0B0A08; --radius-sm: 0px; --radius-md: 2px; --radius-lg: 3px; --radius-xl: 4px; --radius-2xl: 6px; --font-sans: 'Geist','Helvetica Neue',system-ui,sans-serif; --font-display: Georgia,'Times New Roman',serif; --font-serif: Georgia,'Times New Roman',serif; --font-mono: 'JetBrains Mono',ui-monospace,Menlo,monospace; } [data-theme="oro"] h1, [data-theme="oro"] h2, [data-theme="oro"] h3 { font-weight: 400; letter-spacing: .01em; } /* ── MEMBRETE SUIZO · crema institucional ──────────────────── */ [data-theme="membrete"] { color-scheme: light; --bg-base: #F6F1E7; --bg-card: #FDFBF5; --bg-card-alt: #F2ECDD; --bg-hover: #EDE6D4; --border: #E0D7C1; --border-hover: #CBBF9F; --border-focus: #7A6A45; --text-primary: #3D3527; --text-secondary: #5C5138; --text-muted: #7A6A45; --text-dim: #97896A; --text-faint: #B3A88C; --text-ghost: #D8D0BA; --accent-live: #4D6B3F; --accent-danger: #A33B2A; --accent-warn: #8C6B2F; --accent-info: #3F5E7A; --brand-primary: #7A6A45; --brand-primary-hover: #635536; --brand-primary-subtle: rgba(122,106,69,.12); --brand-primary-contrast: #FDFBF5; --radius-sm: 0px; --radius-md: 2px; --radius-lg: 2px; --radius-xl: 3px; --radius-2xl: 4px; --font-sans: Georgia,'Times New Roman',serif; --font-display: Georgia,'Times New Roman',serif; --font-serif: Georgia,'Times New Roman',serif; --font-mono: 'JetBrains Mono',ui-monospace,Menlo,monospace; } [data-theme="membrete"] h1, [data-theme="membrete"] h2, [data-theme="membrete"] h3 { font-weight: 400; } /* ── TERCIOPELO · burdeo y oro ─────────────────────────────── */ [data-theme="terciopelo"] { color-scheme: dark; --bg-base: #2B0E1A; --bg-card: #35121F; --bg-card-alt: #3D1524; --bg-hover: #471A2B; --border: #4A2030; --border-hover: #5E2A3E; --border-focus: #C9A227; --text-primary: #F0E2C8; --text-secondary: #D6C4A2; --text-muted: #B39A6D; --text-dim: #967F58; --text-faint: #6F5E46; --text-ghost: #4A3E32; --accent-live: #8FBF7F; --accent-danger: #E86A5A; --accent-warn: #EAC26A; --accent-info: #85A9D6; --brand-primary: #C9A227; --brand-primary-hover: #DDB83C; --brand-primary-subtle: rgba(201,162,39,.16); --brand-primary-contrast: #2B0E1A; --radius-sm: 2px; --radius-md: 3px; --radius-lg: 4px; --radius-xl: 6px; --radius-2xl: 8px; --font-sans: 'Geist','Helvetica Neue',system-ui,sans-serif; --font-display: Georgia,'Times New Roman',serif; --font-serif: Georgia,'Times New Roman',serif; --font-mono: 'JetBrains Mono',ui-monospace,Menlo,monospace; } [data-theme="terciopelo"] h1, [data-theme="terciopelo"] h2, [data-theme="terciopelo"] h3 { font-weight: 400; } /* ── MÁRMOL Y BRONCE · lobby clásico ───────────────────────── */ [data-theme="marmol"] { color-scheme: light; --bg-base: #EFEEEA; --bg-card: #FFFDF9; --bg-card-alt: #F4F2ED; --bg-hover: #ECE9E2; --border: #DAD7CF; --border-hover: #C4C0B6; --border-focus: #9A6B3F; --text-primary: #2C2A26; --text-secondary: #4C4A44; --text-muted: #6D675C; --text-dim: #8B857A; --text-faint: #A8A399; --text-ghost: #D0CCC4; --accent-live: #4D7A4D; --accent-danger: #B0432E; --accent-warn: #9A7226; --accent-info: #3E6489; --brand-primary: #9A6B3F; --brand-primary-hover: #7C5028; --brand-primary-subtle: rgba(154,107,63,.12); --brand-primary-contrast: #FFFDF9; --radius-sm: 2px; --radius-md: 4px; --radius-lg: 5px; --radius-xl: 6px; --radius-2xl: 8px; --font-sans: 'Geist','Helvetica Neue',system-ui,sans-serif; --font-display: 'Geist','Helvetica Neue',system-ui,sans-serif; --font-serif: Georgia,serif; --font-mono: 'JetBrains Mono',ui-monospace,Menlo,monospace; } /* ── CROMO Y2K · celeste metálico ──────────────────────────── */ [data-theme="cromo"] { color-scheme: light; --bg-base: #E9F7FC; --bg-card: #FFFFFF; --bg-card-alt: #F0FAFE; --bg-hover: #E2F2F9; --border: #B9D8E4; --border-hover: #93C2D4; --border-focus: #0AA0C8; --text-primary: #123043; --text-secondary: #2E4E62; --text-muted: #5B7F93; --text-dim: #7C9CAD; --text-faint: #A0BAC8; --text-ghost: #CFE2EA; --accent-live: #159A6B; --accent-danger: #D8503C; --accent-warn: #C08A1A; --accent-info: #0AA0C8; --brand-primary: #0AA0C8; --brand-primary-hover: #0788AB; --brand-primary-subtle: rgba(10,160,200,.12); --brand-primary-contrast: #FFFFFF; --radius-sm: 8px; --radius-md: 10px; --radius-lg: 12px; --radius-xl: 16px; --radius-2xl: 22px; --font-sans: 'Geist','Helvetica Neue',system-ui,sans-serif; --font-display: 'Geist','Helvetica Neue',system-ui,sans-serif; --font-serif: Georgia,serif; --font-mono: 'JetBrains Mono',ui-monospace,Menlo,monospace; } /* ── VAPORWAVE · púrpura y turquesa ────────────────────────── */ [data-theme="vaporwave"] { color-scheme: dark; --bg-base: #2A1650; --bg-card: #351D63; --bg-card-alt: #3D2270; --bg-hover: #472A80; --border: #5A3B8C; --border-hover: #6F4BAA; --border-focus: #40E0D0; --text-primary: #FDEBFF; --text-secondary: #E3C8F0; --text-muted: #C3A3D8; --text-dim: #A184BC; --text-faint: #7E659B; --text-ghost: #55446E; --accent-live: #40E0D0; --accent-danger: #FF6B8A; --accent-warn: #FFD76E; --accent-info: #7EC8FF; --brand-primary: #FF5FA8; --brand-primary-hover: #FF7FBA; --brand-primary-subtle: rgba(255,95,168,.16); --brand-primary-contrast: #2A1650; --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; --radius-xl: 10px; --radius-2xl: 14px; --font-sans: 'Geist','Helvetica Neue',system-ui,sans-serif; --font-display: 'Geist','Helvetica Neue',system-ui,sans-serif; --font-serif: Georgia,serif; --font-mono: 'JetBrains Mono',ui-monospace,Menlo,monospace; } /* ── WEB 1.0 · gris sistema con biseles ────────────────────── */ [data-theme="retro98"] { color-scheme: light; /* base = el ESCRITORIO teal clásico; las "ventanas" (cards) quedan plata. BARRAS[retro98] debe seguir a este valor (invariante del test). */ --bg-base: #008080; --bg-card: #D4D0C8; --bg-card-alt: #C9C5BD; --bg-hover: #DDD9D1; --border: #808080; --border-hover: #5A5A5A; --border-focus: #000080; --text-primary: #000000; --text-secondary: #1F1F1F; --text-muted: #3D3D3D; --text-dim: #5A5A5A; --text-faint: #7A7A7A; --text-ghost: #A0A0A0; --accent-live: #006400; --accent-danger: #B00000; --accent-warn: #806000; --accent-info: #0000CE; --brand-primary: #000080; --brand-primary-hover: #0000CE; --brand-primary-subtle: rgba(0,0,128,.10); --brand-primary-contrast: #FFFFFF; --radius-sm: 0px; --radius-md: 0px; --radius-lg: 0px; --radius-xl: 0px; --radius-2xl: 0px; --font-sans: Verdana,Geneva,system-ui,sans-serif; --font-display: Verdana,Geneva,system-ui,sans-serif; --font-serif: 'Times New Roman',serif; --font-mono: 'JetBrains Mono',ui-monospace,'Courier New',monospace; } [data-theme="retro98"] .card, [data-theme="retro98"] .panel, [data-theme="retro98"] .stat { border-top: 2px solid #FFFFFF !important; border-left: 2px solid #FFFFFF !important; border-right: 2px solid #5A5A5A !important; border-bottom: 2px solid #5A5A5A !important; } /* ── 8-BIT · arcade nocturno ───────────────────────────────── */ [data-theme="pixel"] { color-scheme: dark; --bg-base: #1B1E2B; --bg-card: #10131C; --bg-card-alt: #161A26; --bg-hover: #202536; --border: #2E3550; --border-hover: #3D4668; --border-focus: #FFD23E; --text-primary: #E8F0FF; --text-secondary: #BFCCE8; --text-muted: #8FA1C7; --text-dim: #6F80A6; --text-faint: #556285; --text-ghost: #363E58; --accent-live: #7CE26A; --accent-danger: #FF5F56; --accent-warn: #FFD23E; --accent-info: #6AC8FF; --brand-primary: #FFD23E; --brand-primary-hover: #FFDF6E; --brand-primary-subtle: rgba(255,210,62,.14); --brand-primary-contrast: #1B1E2B; --radius-sm: 0px; --radius-md: 0px; --radius-lg: 0px; --radius-xl: 0px; --radius-2xl: 0px; --font-sans: 'JetBrains Mono',ui-monospace,Menlo,monospace; --font-display: 'JetBrains Mono',ui-monospace,Menlo,monospace; --font-serif: 'JetBrains Mono',ui-monospace,monospace; --font-mono: 'JetBrains Mono',ui-monospace,Menlo,monospace; } [data-theme="pixel"] h1, [data-theme="pixel"] h2, [data-theme="pixel"] h3 { text-transform: uppercase; letter-spacing: .05em; } /* ── VHS · grabación nocturna ──────────────────────────────── */ [data-theme="vhs"] { color-scheme: dark; --bg-base: #101418; --bg-card: #161B20; --bg-card-alt: #1B2127; --bg-hover: #222930; --border: #2A3138; --border-hover: #39424B; --border-focus: #FF3366; --text-primary: #ECECEC; --text-secondary: #C4C9CD; --text-muted: #9AA3AB; --text-dim: #78828B; --text-faint: #5C656D; --text-ghost: #3A4249; --accent-live: #4ADE80; --accent-danger: #FF3366; --accent-warn: #FBBF24; --accent-info: #22D3EE; --brand-primary: #FF3366; --brand-primary-hover: #FF5C86; --brand-primary-subtle: rgba(255,51,102,.14); --brand-primary-contrast: #101418; --radius-sm: 1px; --radius-md: 2px; --radius-lg: 3px; --radius-xl: 4px; --radius-2xl: 6px; --font-sans: 'JetBrains Mono',ui-monospace,Menlo,monospace; --font-display: 'Archivo','Inter',system-ui,sans-serif; --font-serif: Georgia,serif; --font-mono: 'JetBrains Mono',ui-monospace,Menlo,monospace; } /* ── NEOBRUTAL AMARILLO · variante taxi del brutalista ─────── */ [data-theme="neobrutal"] { color-scheme: light; --bg-base: #FFD23E; --bg-card: #FFFFFF; --bg-card-alt: #FFF6D6; --bg-hover: #FFE98A; --border: #111111; --border-hover: #111111; --border-focus: #111111; --text-primary: #111111; --text-secondary: #2A2A2A; --text-muted: #4A4A4A; --text-dim: #6A6A6A; --text-faint: #8C8C8C; --text-ghost: #BDBDBD; --accent-live: #00A35A; --accent-danger: #E0301A; --accent-warn: #B07219; --accent-info: #1A56FF; --brand-primary: #FF4500; --brand-primary-hover: #E63C00; --brand-primary-subtle: rgba(255,69,0,.12); --brand-primary-contrast: #FFFFFF; --radius-sm: 0px; --radius-md: 0px; --radius-lg: 0px; --radius-xl: 0px; --radius-2xl: 0px; --font-sans: 'Geist','Inter',system-ui,sans-serif; --font-display: 'Geist','Inter',system-ui,sans-serif; --font-serif: Georgia,serif; --font-mono: 'JetBrains Mono',ui-monospace,Menlo,monospace; } [data-theme="neobrutal"] h1, [data-theme="neobrutal"] h2, [data-theme="neobrutal"] h3 { font-weight: 800; letter-spacing: -.03em; } [data-theme="neobrutal"] .card, [data-theme="neobrutal"] .panel, [data-theme="neobrutal"] .stat { border-width: 3px !important; box-shadow: 5px 5px 0 var(--text-primary) !important; } /* ── VIDRIO ESMERILADO · lila translúcido ──────────────────── */ [data-theme="vidrio"] { color-scheme: light; --bg-base: #F1EDFA; --bg-card: #FFFFFF; --bg-card-alt: #F7F4FC; --bg-hover: #EFE9FA; --border: #E0D8F0; --border-hover: #CCC0E6; --border-focus: #7C5CFF; --text-primary: #241F35; --text-secondary: #443C5C; --text-muted: #5C5570; --text-dim: #7C7492; --text-faint: #9C95B0; --text-ghost: #CBC5DB; --accent-live: #1D9E75; --accent-danger: #D8503C; --accent-warn: #B07219; --accent-info: #4A7DDA; --brand-primary: #7C5CFF; --brand-primary-hover: #6A48F0; --brand-primary-subtle: rgba(124,92,255,.12); --brand-primary-contrast: #FFFFFF; --radius-sm: 8px; --radius-md: 10px; --radius-lg: 12px; --radius-xl: 16px; --radius-2xl: 20px; --font-sans: 'Geist','Inter',system-ui,sans-serif; --font-display: 'Geist','Inter',system-ui,sans-serif; --font-serif: Georgia,serif; --font-mono: 'JetBrains Mono',ui-monospace,Menlo,monospace; } /* ── HORMIGÓN · brutalismo arquitectónico ──────────────────── */ [data-theme="hormigon"] { color-scheme: light; --bg-base: #A6A6A2; --bg-card: #B4B4B0; --bg-card-alt: #ADADA9; --bg-hover: #BDBDB9; --border: #6F6F6B; --border-hover: #55554F; --border-focus: #FF4500; --text-primary: #1F1F1C; --text-secondary: #33332F; --text-muted: #4A4A44; --text-dim: #5E5E58; --text-faint: #75756F; --text-ghost: #90908A; --accent-live: #2E5A2E; --accent-danger: #8F2A18; --accent-warn: #7A5A16; --accent-info: #2C4A6E; --brand-primary: #FF4500; --brand-primary-hover: #D63A00; --brand-primary-subtle: rgba(255,69,0,.14); --brand-primary-contrast: #FFFFFF; --radius-sm: 0px; --radius-md: 0px; --radius-lg: 0px; --radius-xl: 0px; --radius-2xl: 0px; --font-sans: 'Geist','Inter',system-ui,sans-serif; --font-display: 'JetBrains Mono',ui-monospace,Menlo,monospace; --font-serif: Georgia,serif; --font-mono: 'JetBrains Mono',ui-monospace,Menlo,monospace; } [data-theme="hormigon"] h1, [data-theme="hormigon"] h2, [data-theme="hormigon"] h3 { text-transform: uppercase; letter-spacing: .04em; font-weight: 800; text-shadow: 0 1px 0 rgba(255,255,255,.35); } /* ── NEÓN NOCTURNO · letrero encendido ─────────────────────── */ [data-theme="neon"] { color-scheme: dark; --bg-base: #0D1226; --bg-card: #111735; --bg-card-alt: #151C40; --bg-hover: #1B234E; --border: #232B4A; --border-hover: #303A61; --border-focus: #FF9D5C; --text-primary: #FFE9D8; --text-secondary: #D9C4B4; --text-muted: #AC9C94; --text-dim: #7D87AC; --text-faint: #5E6A95; --text-ghost: #3A4266; --accent-live: #7EF2C0; --accent-danger: #FF6B8A; --accent-warn: #FFD76E; --accent-info: #67E8F9; --brand-primary: #FF9D5C; --brand-primary-hover: #FFB37E; --brand-primary-subtle: rgba(255,157,92,.16); --brand-primary-contrast: #0D1226; --radius-sm: 6px; --radius-md: 8px; --radius-lg: 10px; --radius-xl: 12px; --radius-2xl: 16px; --font-sans: 'Geist','Inter',system-ui,sans-serif; --font-display: 'Geist','Inter',system-ui,sans-serif; --font-serif: Georgia,serif; --font-mono: 'JetBrains Mono',ui-monospace,Menlo,monospace; } [data-theme="neon"] h1, [data-theme="neon"] h2 { text-shadow: 0 0 12px rgba(255,120,40,.45); } /* ── METAL CEPILLADO · industrial preciso ──────────────────── */ [data-theme="metal"] { color-scheme: light; --bg-base: #D3D5D7; --bg-card: #ECEEF0; --bg-card-alt: #E2E5E7; --bg-hover: #DDE0E2; --border: #9AA0A5; --border-hover: #7D8388; --border-focus: #D84E09; --text-primary: #2B2E30; --text-secondary: #43474A; --text-muted: #5A6065; --text-dim: #71787D; --text-faint: #8B9297; --text-ghost: #B3B9BD; --accent-live: #2E7A4A; --accent-danger: #B0432E; --accent-warn: #9A7226; --accent-info: #2E6489; --brand-primary: #D84E09; --brand-primary-hover: #B84208; --brand-primary-subtle: rgba(216,78,9,.12); --brand-primary-contrast: #FFFFFF; --radius-sm: 2px; --radius-md: 3px; --radius-lg: 4px; --radius-xl: 5px; --radius-2xl: 6px; --font-sans: 'Geist','Inter',system-ui,sans-serif; --font-display: 'Geist','Inter',system-ui,sans-serif; --font-serif: Georgia,serif; --font-mono: 'JetBrains Mono',ui-monospace,Menlo,monospace; } /* ── AURORA · SaaS luminoso ────────────────────────────────── */ [data-theme="aurora"] { color-scheme: light; --bg-base: #FFFFFF; --bg-card: #FFFFFF; --bg-card-alt: #F7F5FB; --bg-hover: #F1EDF8; --border: #E8E4F2; --border-hover: #D5CEE8; --border-focus: #8B5CF6; --text-primary: #14110E; --text-secondary: #3E3A45; --text-muted: #5C5866; --text-dim: #7C7788; --text-faint: #9F9AAB; --text-ghost: #D3CFDC; --accent-live: #1D9E75; --accent-danger: #D8503C; --accent-warn: #B07219; --accent-info: #4A7DDA; --brand-primary: #8B5CF6; --brand-primary-hover: #7C46F0; --brand-primary-subtle: rgba(139,92,246,.10); --brand-primary-contrast: #FFFFFF; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 14px; --radius-xl: 16px; --radius-2xl: 22px; --font-sans: 'Geist','Inter',system-ui,sans-serif; --font-display: 'Geist','Inter',system-ui,sans-serif; --font-serif: Georgia,serif; --font-mono: 'JetBrains Mono',ui-monospace,Menlo,monospace; } [data-theme="aurora"] h1, [data-theme="aurora"] h2, [data-theme="aurora"] h3 { font-weight: 800; letter-spacing: -.035em; } /* ── TOPOGRÁFICO · mapa sobre papel ────────────────────────── */ [data-theme="topo"] { color-scheme: light; --bg-base: #F3EFE6; --bg-card: #FBF8F0; --bg-card-alt: #EFEADD; --bg-hover: #EAE4D4; --border: #DDD3BC; --border-hover: #C7BA9C; --border-focus: #FF4500; --text-primary: #35301F; --text-secondary: #554E38; --text-muted: #7D7461; --text-dim: #988F7A; --text-faint: #B3AB97; --text-ghost: #D6D0BF; --accent-live: #4D6B3F; --accent-danger: #B0432E; --accent-warn: #8C6B2F; --accent-info: #3F5E7A; --brand-primary: #FF4500; --brand-primary-hover: #D63A00; --brand-primary-subtle: rgba(255,69,0,.10); --brand-primary-contrast: #FFFFFF; --radius-sm: 2px; --radius-md: 4px; --radius-lg: 5px; --radius-xl: 6px; --radius-2xl: 8px; --font-sans: 'Geist','Inter',system-ui,sans-serif; --font-display: 'Geist','Inter',system-ui,sans-serif; --font-serif: Georgia,serif; --font-mono: 'JetBrains Mono',ui-monospace,Menlo,monospace; } /* ── DUOTONO · negro y naranja ─────────────────────────────── */ [data-theme="duotono"] { color-scheme: dark; --bg-base: #14110E; --bg-card: #1C1815; --bg-card-alt: #221D19; --bg-hover: #2A241F; --border: #33291F; --border-hover: #453729; --border-focus: #FF4500; --text-primary: #FFF5EE; --text-secondary: #E8C8B5; --text-muted: #C4A28C; --text-dim: #9C8271; --text-faint: #776357; --text-ghost: #4A3E36; --accent-live: #4ADE80; --accent-danger: #FF6B5A; --accent-warn: #FBBF24; --accent-info: #67B8F9; --brand-primary: #FF4500; --brand-primary-hover: #FF6326; --brand-primary-subtle: rgba(255,69,0,.16); --brand-primary-contrast: #FFFFFF; --radius-sm: 1px; --radius-md: 2px; --radius-lg: 3px; --radius-xl: 4px; --radius-2xl: 6px; --font-sans: 'Geist','Inter',system-ui,sans-serif; --font-display: 'Archivo','Geist',system-ui,sans-serif; --font-serif: 'Instrument Serif',Georgia,serif; --font-mono: 'JetBrains Mono',ui-monospace,Menlo,monospace; } [data-theme="duotono"] h1, [data-theme="duotono"] h2, [data-theme="duotono"] h3 { font-weight: 800; letter-spacing: -.03em; } /* ── HUD · telemetría cian ─────────────────────────────────── */ [data-theme="hud"] { color-scheme: dark; --bg-base: #0A0F14; --bg-card: #0D151C; --bg-card-alt: #101A22; --bg-hover: #14212B; --border: #1D3A47; --border-hover: #285264; --border-focus: #67E8F9; --text-primary: #D7F5FB; --text-secondary: #A9D3DE; --text-muted: #7FB0BE; --text-dim: #6F93A3; --text-faint: #52707D; --text-ghost: #31454E; --accent-live: #4ADE80; --accent-danger: #FF5F56; --accent-warn: #FBBF24; --accent-info: #67E8F9; --brand-primary: #67E8F9; --brand-primary-hover: #8DF0FF; --brand-primary-subtle: rgba(103,232,249,.12); --brand-primary-contrast: #0A0F14; --radius-sm: 0px; --radius-md: 1px; --radius-lg: 2px; --radius-xl: 3px; --radius-2xl: 4px; --font-sans: 'JetBrains Mono',ui-monospace,Menlo,monospace; --font-display: 'JetBrains Mono',ui-monospace,Menlo,monospace; --font-serif: 'JetBrains Mono',ui-monospace,monospace; --font-mono: 'JetBrains Mono',ui-monospace,Menlo,monospace; } /* ── NEO-TOKIO · glitch magenta/cian ───────────────────────── */ [data-theme="neotokio"] { color-scheme: dark; --bg-base: #0C0714; --bg-card: #120A20; --bg-card-alt: #170D29; --bg-hover: #1E1233; --border: #2B1F42; --border-hover: #3B2B58; --border-focus: #F000FF; --text-primary: #F2E9FF; --text-secondary: #CEBBE8; --text-muted: #AB96CC; --text-dim: #9B8AB8; --text-faint: #73648F; --text-ghost: #473C5C; --accent-live: #4ADE80; --accent-danger: #FF3366; --accent-warn: #FFD23E; --accent-info: #00E5FF; --brand-primary: #F000FF; --brand-primary-hover: #FF4DFF; --brand-primary-subtle: rgba(240,0,255,.14); --brand-primary-contrast: #0C0714; --radius-sm: 1px; --radius-md: 2px; --radius-lg: 3px; --radius-xl: 4px; --radius-2xl: 6px; --font-sans: 'Geist','Inter',system-ui,sans-serif; --font-display: 'Geist','Inter',system-ui,sans-serif; --font-serif: Georgia,serif; --font-mono: 'JetBrains Mono',ui-monospace,Menlo,monospace; } /* ── CONTROL DE MISIÓN · fósforo sobrio (variante de crt) ──── */ [data-theme="mision"] { color-scheme: dark; --bg-base: #050705; --bg-card: #081108; --bg-card-alt: #0A150A; --bg-hover: #0E1D0E; --border: #153820; --border-hover: #1F5230; --border-focus: #5EF27C; --text-primary: #5EF27C; --text-secondary: #4CC968; --text-muted: #3F9A55; --text-dim: #2F7A42; --text-faint: #235C32; --text-ghost: #143820; --accent-live: #5EF27C; --accent-danger: #FF5F56; --accent-warn: #EAFF6B; --accent-info: #5DF2C8; --brand-primary: #5EF27C; --brand-primary-hover: #82F79A; --brand-primary-subtle: rgba(94,242,124,.12); --brand-primary-contrast: #050705; --radius-sm: 0px; --radius-md: 0px; --radius-lg: 0px; --radius-xl: 0px; --radius-2xl: 0px; --font-sans: 'JetBrains Mono',ui-monospace,Menlo,monospace; --font-display: 'JetBrains Mono',ui-monospace,Menlo,monospace; --font-serif: 'JetBrains Mono',ui-monospace,monospace; --font-mono: 'JetBrains Mono',ui-monospace,Menlo,monospace; } [data-theme="mision"] h1, [data-theme="mision"] h2, [data-theme="mision"] h3 { text-transform: uppercase; letter-spacing: .04em; font-weight: 700; } /* ═══════════════════════════════════════════════════════════════ CAPA DE ALMA v2 (16-jul-2026) — la v1 fracasó dos veces: 1) colgaba firmas de selectores que NO existen en el backoffice (.brand-title/.sidebar son del portal viejo; acá es .sidebar-brand-name/.admin-sidebar) → el ● REC de VHS jamás se renderizó, y el check de deploy solo verificó que el CSS llegara, no que los selectores pegaran contra el DOM real; 2) 1-3 trazos por tema no transforman nada: el user ve "solo un cambio de colores". Los landings cambian TIPOGRAFÍA, FONDO, FORMAS y traen elementos vivos. v2 = cada tema toca las 6 palancas sobre los ganchos REALES: fondo (body/.admin-content) · sidebar (.admin-sidebar/.sidebar-*) título (h1/.page-title + .kicker) · contenedores (unión completa: .panel .kpi .hero .stat .ocard .aml-panel .saldo-card .portal-card) botones (.btn*/.frm button) · una firma viva (gated reduced-motion). Regla intacta: los DATOS siguen legibles — texturas en el fondo, nunca bajo tablas; paneles siempre con fondo sólido. ═══════════════════════════════════════════════════════════════ */ /* ── VHS · la grabación entera: tracking, scanlines, REC, RGB ── */ [data-theme="vhs"] body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 2000; background: repeating-linear-gradient(rgba(255,255,255,.05) 0 1px, transparent 1px 3px); } /* banda de tracking que recorre la pantalla, como cinta gastada */ [data-theme="vhs"] body::before { content: ""; position: fixed; left: 0; right: 0; top: -12%; height: 74px; pointer-events: none; z-index: 1999; background: linear-gradient(180deg, transparent, rgba(255,255,255,.045) 45%, rgba(0,220,255,.035) 58%, transparent); animation: vhs-track 11s linear infinite; } @keyframes vhs-track { to { transform: translateY(130vh); } } [data-theme="vhs"] .sidebar-brand-name { text-transform: uppercase; font-style: italic; letter-spacing: .08em; } [data-theme="vhs"] .sidebar-brand-name::after { content: "● REC"; font-family: var(--font-mono); font-style: normal; font-size: 9px; letter-spacing: .18em; color: #FF3366; margin-left: 9px; vertical-align: 2px; animation: vhs-rec 1.3s steps(2) infinite; } @keyframes vhs-rec { 50% { opacity: .15; } } [data-theme="vhs"] h1, [data-theme="vhs"] .page-title { font-style: italic; text-transform: uppercase; letter-spacing: .02em; text-shadow: -2px 0 rgba(255,0,80,.5), 2px 0 rgba(0,220,255,.5); } [data-theme="vhs"] h2 { text-shadow: -1.5px 0 rgba(255,0,80,.35), 1.5px 0 rgba(0,220,255,.35); } [data-theme="vhs"] .kicker { color: #FF3366; } [data-theme="vhs"] .kicker::before { content: "▶"; width: auto; height: auto; background: none; opacity: 1; font-size: 9px; color: #FF3366; } [data-theme="vhs"] .panel, [data-theme="vhs"] .kpi, [data-theme="vhs"] .hero, [data-theme="vhs"] .stat, [data-theme="vhs"] .ocard, [data-theme="vhs"] .aml-panel, [data-theme="vhs"] .saldo-card, [data-theme="vhs"] .portal-card { border-left: 2px solid rgba(255,51,102,.55); } [data-theme="vhs"] .btn, [data-theme="vhs"] .btn-primary, [data-theme="vhs"] .btn-secondary, [data-theme="vhs"] .btn-brand, [data-theme="vhs"] .frm button, [data-theme="vhs"] .theme-dot { border-radius: 0; box-shadow: -2px 0 0 rgba(0,220,255,.45), 2px 0 0 rgba(255,0,80,.45); } [data-theme="vhs"] th { color: #5CB8C9; } [data-theme="vhs"] .admin-sidebar { background: #0C0F13; } [data-theme="vhs"] .sidebar-link.active { text-shadow: -1px 0 rgba(255,0,80,.4), 1px 0 rgba(0,220,255,.4); } [data-theme="vhs"] .sidebar-link.active::before { background: #FF3366; } [data-theme="vhs"] ::selection { background: #FF3366; color: #fff; } /* ── NEOBRUTAL · el sticker sheet: todo con borde y sombra dura ── */ [data-theme="neobrutal"] .card, [data-theme="neobrutal"] .panel, [data-theme="neobrutal"] .kpi, [data-theme="neobrutal"] .hero, [data-theme="neobrutal"] .stat, [data-theme="neobrutal"] .ocard, [data-theme="neobrutal"] .aml-panel, [data-theme="neobrutal"] .saldo-card, [data-theme="neobrutal"] .portal-card, [data-theme="neobrutal"] .warn-desc, [data-theme="neobrutal"] .portal-flash { border: 3px solid #111 !important; border-radius: 0 !important; box-shadow: 6px 6px 0 #111 !important; } [data-theme="neobrutal"] h1, [data-theme="neobrutal"] .page-title { font-weight: 900; text-transform: uppercase; letter-spacing: -.02em; text-decoration: underline; text-decoration-thickness: 6px; text-decoration-color: #FF4500; text-underline-offset: 7px; } [data-theme="neobrutal"] .kicker { background: #111; color: #FFD23E; padding: 3px 9px; width: fit-content; font-weight: 700; } [data-theme="neobrutal"] .kicker::before { display: none; } [data-theme="neobrutal"] .btn, [data-theme="neobrutal"] .btn-primary, [data-theme="neobrutal"] .btn-secondary, [data-theme="neobrutal"] .btn-brand, [data-theme="neobrutal"] .btn-outline-primary, [data-theme="neobrutal"] .btn-outline-light, [data-theme="neobrutal"] .frm button, [data-theme="neobrutal"] .theme-dot, [data-theme="neobrutal"] .b, [data-theme="neobrutal"] button.b { border: 2px solid #111 !important; border-radius: 0 !important; box-shadow: 4px 4px 0 #111; font-weight: 800; text-transform: uppercase; transition: transform .1s, box-shadow .1s; } [data-theme="neobrutal"] .btn:hover, [data-theme="neobrutal"] .btn-primary:hover, [data-theme="neobrutal"] .btn-brand:hover, [data-theme="neobrutal"] .frm button:hover, [data-theme="neobrutal"] .b:hover { transform: translate(-2px,-2px); box-shadow: 6px 6px 0 #111; } [data-theme="neobrutal"] .btn:active, [data-theme="neobrutal"] .btn-brand:active, [data-theme="neobrutal"] .frm button:active { transform: translate(2px,2px); box-shadow: 0 0 0 #111; } [data-theme="neobrutal"] .frm input, [data-theme="neobrutal"] .form-control, [data-theme="neobrutal"] .portal-input, [data-theme="neobrutal"] .form-select { border: 2px solid #111; border-radius: 0; } [data-theme="neobrutal"] th { color: #111; font-weight: 800; border-bottom: 2px solid #111 !important; } [data-theme="neobrutal"] .admin-sidebar { background: var(--bg-base); border-right: 3px solid #111; } [data-theme="neobrutal"] .sidebar-brand-icon { border: 2px solid #111; border-radius: 0; box-shadow: 2px 2px 0 #111; } [data-theme="neobrutal"] .sidebar-brand-name { font-weight: 900; text-transform: uppercase; letter-spacing: .02em; } [data-theme="neobrutal"] .sidebar-link { border: 2px solid transparent; border-radius: 0; font-weight: 700; } [data-theme="neobrutal"] .sidebar-link:hover { background: #fff; border-color: #111; } [data-theme="neobrutal"] .sidebar-link.active { background: #fff; border: 2px solid #111; box-shadow: 3px 3px 0 #111; } [data-theme="neobrutal"] .sidebar-link.active::before { display: none; } [data-theme="neobrutal"] ::selection { background: #FFD23E; color: #111; } /* ── HUD · cabina de mando: miras, barrido, retícula, readouts ── */ [data-theme="hud"] .panel, [data-theme="hud"] .kpi, [data-theme="hud"] .hero, [data-theme="hud"] .stat, [data-theme="hud"] .ocard, [data-theme="hud"] .aml-panel, [data-theme="hud"] .saldo-card, [data-theme="hud"] .portal-card { background-color: var(--bg-card); background-image: linear-gradient(var(--brand-primary), var(--brand-primary)), linear-gradient(var(--brand-primary), var(--brand-primary)), linear-gradient(var(--brand-primary), var(--brand-primary)), linear-gradient(var(--brand-primary), var(--brand-primary)); background-size: 18px 2px, 2px 18px, 18px 2px, 2px 18px; background-position: left top, left top, right bottom, right bottom; background-repeat: no-repeat; } [data-theme="hud"] .admin-content { background-image: radial-gradient(rgba(103,232,249,.07) 1px, transparent 1.3px); background-size: 26px 26px; } /* línea de barrido vertical, como radar recorriendo la consola */ [data-theme="hud"] body::before { content: ""; position: fixed; left: 0; right: 0; top: 0; height: 1px; pointer-events: none; z-index: 1999; background: linear-gradient(90deg, transparent, rgba(103,232,249,.4) 50%, transparent); animation: hud-scan 7s ease-in-out infinite; } @keyframes hud-scan { to { transform: translateY(100vh); } } [data-theme="hud"] h1, [data-theme="hud"] .page-title { text-transform: uppercase; letter-spacing: .04em; text-shadow: 0 0 14px rgba(103,232,249,.35); } [data-theme="hud"] .page-title::before, [data-theme="hud"] h1::before { content: "⌖ "; color: #67E8F9; } [data-theme="hud"] .kicker, [data-theme="hud"] .kpi .lbl, [data-theme="hud"] .stat-label, [data-theme="hud"] .hero-chart .hd .ttl, [data-theme="hud"] .sidebar-section-label { color: #4FB3C4; letter-spacing: .24em; } [data-theme="hud"] .panel h2::before, [data-theme="hud"] .panel-title::before { content: "▮ "; color: #67E8F9; animation: hud-blink 2.2s steps(2) infinite; } @keyframes hud-blink { 50% { opacity: .25; } } [data-theme="hud"] .btn, [data-theme="hud"] .btn-primary, [data-theme="hud"] .btn-secondary, [data-theme="hud"] .btn-brand, [data-theme="hud"] .frm button, [data-theme="hud"] .theme-dot { border-radius: 0; text-transform: uppercase; letter-spacing: .16em; font-weight: 700; } [data-theme="hud"] th { color: #4FB3C4; letter-spacing: .2em; } [data-theme="hud"] .tbl tbody tr:hover, [data-theme="hud"] .data-table tbody tr:hover td { background: rgba(103,232,249,.06); } [data-theme="hud"] .admin-sidebar { background: #081017; } [data-theme="hud"] .sidebar-brand-name { text-transform: uppercase; letter-spacing: .12em; } [data-theme="hud"] .sidebar-link { letter-spacing: .04em; } [data-theme="hud"] .sidebar-link.active { text-shadow: 0 0 8px rgba(103,232,249,.45); } [data-theme="hud"] .sidebar-link.active::before { background: #67E8F9; box-shadow: 0 0 8px rgba(103,232,249,.8); } [data-theme="hud"] ::selection { background: #67E8F9; color: #0A0F14; } /* ── ORO · banca privada: vitrina oscura, filete dorado, serif ── */ [data-theme="oro"] body { background: radial-gradient(1100px 520px at 50% -12%, rgba(201,162,39,.08), transparent 62%) fixed, var(--bg-base); } [data-theme="oro"] .panel, [data-theme="oro"] .kpi, [data-theme="oro"] .hero, [data-theme="oro"] .stat, [data-theme="oro"] .ocard, [data-theme="oro"] .aml-panel, [data-theme="oro"] .saldo-card, [data-theme="oro"] .portal-card { border-color: #3A3426; border-top: 1px solid rgba(201,162,39,.5); box-shadow: inset 0 0 0 1px rgba(201,162,39,.14), 0 14px 26px -22px #000; } [data-theme="oro"] h1, [data-theme="oro"] .page-title { font-family: var(--font-display); font-weight: 400; letter-spacing: .02em; } [data-theme="oro"] .page-title::after { content: " ✦"; color: #C9A227; font-size: .55em; vertical-align: 4px; } [data-theme="oro"] .kicker { color: #C9A227; } [data-theme="oro"] .kicker::before { background: #C9A227; } [data-theme="oro"] .panel h2, [data-theme="oro"] .panel-title { color: #A8861F; } [data-theme="oro"] th { color: #A8861F; letter-spacing: .18em; } [data-theme="oro"] .btn-brand, [data-theme="oro"] .frm button, [data-theme="oro"] .btn-primary { background: linear-gradient(180deg, #DDB83C, #B08A1E); color: #0B0A08; border: 1px solid #8A6E14; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; border-radius: 2px; } [data-theme="oro"] .btn-brand:hover, [data-theme="oro"] .frm button:hover, [data-theme="oro"] .btn-primary:hover { background: linear-gradient(180deg, #E8C654, #C29A24); color: #0B0A08; } [data-theme="oro"] .admin-sidebar { background: #0D0C09; border-right: 1px solid #3A3426; } [data-theme="oro"] .sidebar-brand-name { font-family: var(--font-serif); font-style: italic; letter-spacing: .03em; color: #E5D9B8; } [data-theme="oro"] .sidebar-brand-icon { border-radius: 50%; background: radial-gradient(circle at 35% 30%, #EACB5E, #A07C16); } [data-theme="oro"] .sidebar-section-label { color: #A8861F; } [data-theme="oro"] .sidebar-user-avatar { box-shadow: 0 0 0 1px #C9A227; } [data-theme="oro"] ::selection { background: #C9A227; color: #0B0A08; } /* ── MEMBRETE · papelería suiza: doble filete, versalitas, lacre ── */ [data-theme="membrete"] body { background: repeating-linear-gradient(transparent 0 27px, rgba(122,106,69,.05) 27px 28px), var(--bg-base); } [data-theme="membrete"] .page-head, [data-theme="membrete"] .pnl-head { border-bottom: 3px double #7A6A45; padding-bottom: 14px; margin-bottom: 18px; } [data-theme="membrete"] h1, [data-theme="membrete"] .page-title { font-weight: 400; letter-spacing: .02em; } [data-theme="membrete"] .kicker { color: #7A6A45; font-variant: small-caps; text-transform: none; letter-spacing: .3em; } [data-theme="membrete"] .panel, [data-theme="membrete"] .kpi, [data-theme="membrete"] .hero, [data-theme="membrete"] .stat, [data-theme="membrete"] .ocard, [data-theme="membrete"] .aml-panel, [data-theme="membrete"] .saldo-card, [data-theme="membrete"] .portal-card { border-top: 2px solid rgba(122,106,69,.55); box-shadow: 0 1px 0 rgba(122,106,69,.15), 0 1px 3px rgba(61,53,39,.08); } [data-theme="membrete"] .panel h2, [data-theme="membrete"] .panel-title { font-family: var(--font-serif); font-variant: small-caps; text-transform: none; letter-spacing: .22em; color: #5C5138; } [data-theme="membrete"] th { font-family: var(--font-serif); font-variant: small-caps; text-transform: none; letter-spacing: .14em; color: #7A6A45; } [data-theme="membrete"] .btn, [data-theme="membrete"] .btn-brand, [data-theme="membrete"] .frm button, [data-theme="membrete"] .btn-primary { letter-spacing: .18em; text-transform: uppercase; border-radius: 0; } [data-theme="membrete"] .admin-sidebar { background: #FBF7EC; } [data-theme="membrete"] .sidebar-brand-name { font-variant: small-caps; letter-spacing: .18em; font-weight: 600; } [data-theme="membrete"] .sidebar-brand-icon { border-radius: 50%; background: radial-gradient(circle at 35% 30%, #B0432E, #7E2A1B); /* lacre */ } /* ── TERCIOPELO · joyero burdeo: viñeta, brillo sesgado, oro ── */ [data-theme="terciopelo"] body { background: radial-gradient(140% 100% at 50% 0%, #3A1424 0%, #2B0E1A 55%, #1F0912 100%) fixed; } [data-theme="terciopelo"] .panel, [data-theme="terciopelo"] .kpi, [data-theme="terciopelo"] .hero, [data-theme="terciopelo"] .stat, [data-theme="terciopelo"] .ocard, [data-theme="terciopelo"] .aml-panel, [data-theme="terciopelo"] .saldo-card, [data-theme="terciopelo"] .portal-card { background-color: var(--bg-card); background-image: linear-gradient(155deg, rgba(255,255,255,.04), transparent 45%); box-shadow: inset 0 0 0 1px rgba(201,162,39,.3), 0 14px 30px -22px #000; } [data-theme="terciopelo"] h1, [data-theme="terciopelo"] .page-title { font-family: var(--font-display); font-style: italic; font-weight: 400; color: #EAD9AE; } [data-theme="terciopelo"] .kicker { color: #C9A227; } [data-theme="terciopelo"] .kicker::before { background: #C9A227; } [data-theme="terciopelo"] .panel h2, [data-theme="terciopelo"] .panel-title { color: #C9A227; } [data-theme="terciopelo"] th { color: #B39A6D; } [data-theme="terciopelo"] .btn-brand, [data-theme="terciopelo"] .frm button, [data-theme="terciopelo"] .btn-primary { background: linear-gradient(180deg, #D9B23A, #A98418); color: #2B0E1A; border: 1px solid #8A6E14; border-radius: 3px; font-weight: 600; } [data-theme="terciopelo"] .btn-brand:hover, [data-theme="terciopelo"] .frm button:hover, [data-theme="terciopelo"] .btn-primary:hover { background: linear-gradient(180deg, #E8C654, #BC9420); color: #2B0E1A; } [data-theme="terciopelo"] .admin-sidebar { background: #240B15; border-right: 1px solid rgba(201,162,39,.25); } [data-theme="terciopelo"] .sidebar-brand-name { font-family: var(--font-serif); font-style: italic; color: #EAD9AE; } [data-theme="terciopelo"] .sidebar-user-avatar { box-shadow: 0 0 0 1px #C9A227; } /* ── MÁRMOL · lobby: vetas, lápida romana, bronce ──────────── */ [data-theme="marmol"] body { background: linear-gradient(115deg, transparent 0 42%, rgba(44,42,38,.04) 45%, transparent 48%), linear-gradient(65deg, transparent 0 60%, rgba(44,42,38,.03) 63%, transparent 66%), linear-gradient(158deg, transparent 0 25%, rgba(154,107,63,.03) 27%, transparent 30%), var(--bg-base); } [data-theme="marmol"] h1, [data-theme="marmol"] .page-title { text-transform: uppercase; letter-spacing: .16em; font-weight: 500; } [data-theme="marmol"] .page-head { border-bottom: 1px solid #C4C0B6; padding-bottom: 12px; } [data-theme="marmol"] .kicker { color: #9A6B3F; letter-spacing: .3em; } [data-theme="marmol"] .panel, [data-theme="marmol"] .kpi, [data-theme="marmol"] .hero, [data-theme="marmol"] .stat, [data-theme="marmol"] .ocard, [data-theme="marmol"] .aml-panel, [data-theme="marmol"] .saldo-card, [data-theme="marmol"] .portal-card { border-top: 3px solid #9A6B3F; box-shadow: inset 0 1px 0 #FFF, 0 10px 24px -20px rgba(44,42,38,.5); } [data-theme="marmol"] .panel h2, [data-theme="marmol"] .panel-title { letter-spacing: .22em; color: #6D675C; } [data-theme="marmol"] th { letter-spacing: .2em; color: #9A6B3F; } [data-theme="marmol"] .btn, [data-theme="marmol"] .btn-brand, [data-theme="marmol"] .frm button { letter-spacing: .16em; text-transform: uppercase; border-radius: 2px; } [data-theme="marmol"] .admin-sidebar { background: #FBF9F4; } [data-theme="marmol"] .sidebar-brand-name { text-transform: uppercase; letter-spacing: .22em; font-weight: 500; } [data-theme="marmol"] .sidebar-brand-icon { border-radius: 0; } /* ── CROMO Y2K · gel y cromados: título metálico, botones pill ── */ [data-theme="cromo"] body { background: linear-gradient(180deg, #F2FBFE 0%, #E9F7FC 40%, #D8EFF8 100%) fixed; } [data-theme="cromo"] h1, [data-theme="cromo"] .page-title { font-weight: 800; letter-spacing: -.01em; background: linear-gradient(180deg, #8FB9CC 0%, #EAF8FE 34%, #6FA5BC 50%, #E2F4FB 66%, #52869E 100%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; filter: drop-shadow(0 1px 0 rgba(255,255,255,.85)); } [data-theme="cromo"] .kicker { color: #0AA0C8; } [data-theme="cromo"] .panel, [data-theme="cromo"] .kpi, [data-theme="cromo"] .hero, [data-theme="cromo"] .stat, [data-theme="cromo"] .ocard, [data-theme="cromo"] .aml-panel, [data-theme="cromo"] .saldo-card, [data-theme="cromo"] .portal-card { background-color: #FFFFFF; background-image: linear-gradient(180deg, #FFFFFF, #F0FAFE); box-shadow: inset 0 1px 0 #FFF, 0 10px 22px -16px rgba(20,60,90,.5); } [data-theme="cromo"] .btn, [data-theme="cromo"] .btn-secondary, [data-theme="cromo"] .btn-outline-primary, [data-theme="cromo"] .theme-dot { border-radius: 999px; } [data-theme="cromo"] .btn-brand, [data-theme="cromo"] .btn-primary, [data-theme="cromo"] .frm button { border-radius: 999px; font-weight: 700; color: #FFFFFF; background: linear-gradient(180deg, #8FE0F5 0%, #2CB4D8 55%, #0AA0C8 100%); border: 1px solid #4FB8D4; box-shadow: inset 0 2px 0 rgba(255,255,255,.65), 0 4px 10px -6px rgba(10,160,200,.8); text-shadow: 0 1px 1px rgba(7,80,100,.4); } [data-theme="cromo"] .btn-brand:hover, [data-theme="cromo"] .btn-primary:hover, [data-theme="cromo"] .frm button:hover { background: linear-gradient(180deg, #A5E8F8 0%, #3FC2E4 55%, #12ACD4 100%); color: #FFF; } [data-theme="cromo"] th { color: #0AA0C8; } [data-theme="cromo"] .admin-sidebar { background: linear-gradient(180deg, #FFFFFF, #EAF7FC); } [data-theme="cromo"] .sidebar-brand-icon { border-radius: 50%; background: radial-gradient(circle at 30% 25%, #B8ECFA, #0AA0C8); box-shadow: inset 0 1px 0 rgba(255,255,255,.8); } [data-theme="cromo"] .sidebar-link { border-radius: 999px; } [data-theme="cromo"] .sidebar-link.active { background: linear-gradient(180deg, #E4F6FC, #CFEEF8); } [data-theme="cromo"] .sidebar-link.active::before { display: none; } /* ── VAPORWAVE · atardecer + piso de retícula + texto glitch ── */ [data-theme="vaporwave"] body { background-color: #2A1650; background-image: radial-gradient(720px 320px at 50% 106%, rgba(255,95,168,.28), transparent 62%), repeating-linear-gradient(90deg, rgba(64,224,208,.09) 0 1px, transparent 1px 64px), repeating-linear-gradient(0deg, rgba(64,224,208,.09) 0 1px, transparent 1px 30px), linear-gradient(180deg, #1E0F3E 0%, #2A1650 45%, #3A1E66 100%); background-size: auto, 100% 34%, 100% 34%, auto; background-position: bottom, bottom, bottom, top; background-repeat: no-repeat; background-attachment: fixed; } [data-theme="vaporwave"] h1, [data-theme="vaporwave"] .page-title { text-transform: uppercase; letter-spacing: .05em; font-weight: 800; text-shadow: 3px 3px 0 rgba(64,224,208,.55), -2px -2px 0 rgba(255,95,168,.35); } [data-theme="vaporwave"] .kicker { color: #40E0D0; letter-spacing: .3em; } [data-theme="vaporwave"] .panel, [data-theme="vaporwave"] .kpi, [data-theme="vaporwave"] .hero, [data-theme="vaporwave"] .stat, [data-theme="vaporwave"] .ocard, [data-theme="vaporwave"] .aml-panel, [data-theme="vaporwave"] .saldo-card, [data-theme="vaporwave"] .portal-card { border: 1px solid #6F4BAA; box-shadow: 0 0 0 1px rgba(64,224,208,.14), 0 16px 30px -22px #000; } [data-theme="vaporwave"] .btn-brand, [data-theme="vaporwave"] .btn-primary, [data-theme="vaporwave"] .frm button { background: linear-gradient(90deg, #FF5FA8, #9D5CFF 55%, #40E0D0); color: #1D0F38; font-weight: 800; border-radius: 8px; border: none; } [data-theme="vaporwave"] .btn-brand:hover, [data-theme="vaporwave"] .btn-primary:hover, [data-theme="vaporwave"] .frm button:hover { background: linear-gradient(90deg, #FF7FBA, #B27EFF 55%, #6EEDE0); color: #1D0F38; } [data-theme="vaporwave"] th { color: #7EC8FF; } [data-theme="vaporwave"] .admin-sidebar { background: #241148; } [data-theme="vaporwave"] .sidebar-brand-name { background: linear-gradient(90deg, #FF5FA8, #40E0D0); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; } [data-theme="vaporwave"] .sidebar-link.active::before { background: #40E0D0; } [data-theme="vaporwave"] ::selection { background: #FF5FA8; color: #2A1650; } /* ── WEB 1.0 · escritorio teal, barras de título navy, biseles ── */ [data-theme="retro98"] h1, [data-theme="retro98"] .page-title { background: linear-gradient(90deg, #000080, #1084D0); color: #FFFFFF; padding: 5px 12px; font-size: 20px; font-weight: 700; letter-spacing: 0; box-shadow: inset -1px -1px 0 #000, inset 1px 1px 0 #DFDFDF, inset -2px -2px 0 #808080, inset 2px 2px 0 #FFF; } /* blanco SOLO para los rótulos que pisan el escritorio teal (cual etiqueta de ícono win98); los kickers DENTRO de paneles plata siguen oscuros */ [data-theme="retro98"] .page-head .kicker, [data-theme="retro98"] .pnl-head .kicker, [data-theme="retro98"] .page-sub, [data-theme="retro98"] .fee-form label { color: #FFFFFF; text-shadow: 1px 1px 0 rgba(0,0,0,.55); } [data-theme="retro98"] .page-head .kicker::before, [data-theme="retro98"] .pnl-head .kicker::before { background: #FFFFFF; } /* la caja de aviso translúcida se pierde sobre el teal: ventana plata bisel */ [data-theme="retro98"] .warn-desc { background: #D4D0C8; color: #1F1F1F; border-top: 2px solid #FFFFFF !important; border-left: 2px solid #FFFFFF !important; border-right: 2px solid #5A5A5A !important; border-bottom: 2px solid #5A5A5A !important; border-radius: 0 !important; } [data-theme="retro98"] .warn-desc .mono { color: #806000; } [data-theme="retro98"] .panel h2, [data-theme="retro98"] .panel-title, [data-theme="retro98"] .card-header { background: linear-gradient(90deg, #000080, #1084D0); color: #FFFFFF !important; padding: 3px 9px; letter-spacing: .02em; text-transform: none; } [data-theme="retro98"] .panel h2 .c { color: #DCE4F4; border-color: #DCE4F4; } [data-theme="retro98"] .panel-title i { color: #FFFFFF; } [data-theme="retro98"] .panel, [data-theme="retro98"] .kpi, [data-theme="retro98"] .hero, [data-theme="retro98"] .card, [data-theme="retro98"] .stat, [data-theme="retro98"] .ocard, [data-theme="retro98"] .aml-panel, [data-theme="retro98"] .saldo-card, [data-theme="retro98"] .portal-card { border-top: 2px solid #FFFFFF !important; border-left: 2px solid #FFFFFF !important; border-right: 2px solid #5A5A5A !important; border-bottom: 2px solid #5A5A5A !important; border-radius: 0 !important; box-shadow: 1px 1px 0 #000; } [data-theme="retro98"] .btn, [data-theme="retro98"] .btn-primary, [data-theme="retro98"] .btn-secondary, [data-theme="retro98"] .btn-brand, [data-theme="retro98"] .btn-outline-primary, [data-theme="retro98"] .btn-outline-light, [data-theme="retro98"] .frm button, [data-theme="retro98"] .theme-dot, [data-theme="retro98"] .b { background: #D4D0C8; color: #000; border: none; border-radius: 0 !important; box-shadow: inset -1px -1px 0 #000, inset 1px 1px 0 #FFF, inset -2px -2px 0 #808080, inset 2px 2px 0 #DFDFDF; font-family: Verdana, Geneva, sans-serif; font-size: 12px; font-weight: 400; text-transform: none; letter-spacing: 0; } [data-theme="retro98"] .btn:hover, [data-theme="retro98"] .btn-primary:hover, [data-theme="retro98"] .btn-brand:hover, [data-theme="retro98"] .frm button:hover { background: #DDD9D1; color: #000; transform: none; box-shadow: inset -1px -1px 0 #000, inset 1px 1px 0 #FFF, inset -2px -2px 0 #808080, inset 2px 2px 0 #DFDFDF; } [data-theme="retro98"] .btn:active, [data-theme="retro98"] .btn-primary:active, [data-theme="retro98"] .btn-brand:active, [data-theme="retro98"] .frm button:active { box-shadow: inset 1px 1px 0 #000, inset -1px -1px 0 #FFF, inset 2px 2px 0 #808080; transform: none; } [data-theme="retro98"] .frm input, [data-theme="retro98"] .form-control, [data-theme="retro98"] .portal-input, [data-theme="retro98"] .form-select { background: #FFFFFF; border-radius: 0; border: 1px solid #5A5A5A; box-shadow: inset 1px 1px 0 #808080, inset -1px -1px 0 #DFDFDF; } [data-theme="retro98"] th { background: #D4D0C8; border: 1px solid; border-color: #FFF #5A5A5A #5A5A5A #FFF; color: #000; text-transform: none; letter-spacing: 0; font-family: Verdana, Geneva, sans-serif; font-size: 11px; padding: 4px 8px; } [data-theme="retro98"] .admin-sidebar { background: #D4D0C8; border-right: 2px solid #808080; } [data-theme="retro98"] .sidebar-link { border-radius: 0; color: #000; } [data-theme="retro98"] .sidebar-link:hover { background: #C9C5BD; } [data-theme="retro98"] .sidebar-link.active { background: #000080; color: #FFF; } [data-theme="retro98"] .sidebar-link.active i { color: #FFF; } [data-theme="retro98"] .sidebar-link.active::before { display: none; } [data-theme="retro98"] .sidebar-brand-icon { border-radius: 0; background: #000080; box-shadow: inset -1px -1px 0 #000, inset 1px 1px 0 #DFDFDF; } [data-theme="retro98"] ::-webkit-scrollbar { width: 14px; height: 14px; } [data-theme="retro98"] ::-webkit-scrollbar-thumb { background: #D4D0C8; border-radius: 0; border: 1px solid; border-color: #FFF #5A5A5A #5A5A5A #FFF; } [data-theme="retro98"] ::-webkit-scrollbar-track { background: repeating-conic-gradient(#FFF 0 25%, #D4D0C8 0 50%) 0 0/2px 2px; } /* ── 8-BIT · arcade: damero, cursor que parpadea, sombras block ── */ [data-theme="pixel"] body { background-image: conic-gradient(rgba(255,255,255,.015) 25%, transparent 0 50%, rgba(255,255,255,.015) 0 75%, transparent 0); background-size: 24px 24px; } [data-theme="pixel"] h1, [data-theme="pixel"] .page-title { text-shadow: 3px 3px 0 #000, 6px 6px 0 rgba(255,210,62,.28); } [data-theme="pixel"] .page-title::after { content: "▮"; margin-left: 10px; color: #FFD23E; animation: px-blink 1.1s steps(2) infinite; } @keyframes px-blink { 50% { opacity: 0; } } [data-theme="pixel"] .panel, [data-theme="pixel"] .kpi, [data-theme="pixel"] .hero, [data-theme="pixel"] .stat, [data-theme="pixel"] .ocard, [data-theme="pixel"] .aml-panel, [data-theme="pixel"] .saldo-card, [data-theme="pixel"] .portal-card { border: 2px solid #2E3550; border-radius: 0 !important; box-shadow: 5px 5px 0 #000; } [data-theme="pixel"] .btn, [data-theme="pixel"] .btn-primary, [data-theme="pixel"] .btn-secondary, [data-theme="pixel"] .btn-brand, [data-theme="pixel"] .frm button, [data-theme="pixel"] .theme-dot { border: 2px solid #000; border-radius: 0 !important; box-shadow: 3px 3px 0 #000; text-transform: uppercase; font-weight: 700; letter-spacing: .08em; transition: transform .08s, box-shadow .08s; } [data-theme="pixel"] .btn:hover, [data-theme="pixel"] .btn-brand:hover, [data-theme="pixel"] .frm button:hover { transform: translate(-1px,-1px); box-shadow: 4px 4px 0 #000; } [data-theme="pixel"] .btn:active, [data-theme="pixel"] .btn-brand:active, [data-theme="pixel"] .frm button:active { transform: translate(3px,3px); box-shadow: 0 0 0 #000; } [data-theme="pixel"] .kicker { color: #FFD23E; } [data-theme="pixel"] .kicker::before { background: #FFD23E; } [data-theme="pixel"] th { color: #C7A62F; } [data-theme="pixel"] .admin-sidebar { background: #10131C; border-right: 2px solid #2E3550; } [data-theme="pixel"] .sidebar-brand-name { text-transform: uppercase; letter-spacing: .14em; } [data-theme="pixel"] .sidebar-link { border-radius: 0; } [data-theme="pixel"] .sidebar-link.active { background: #FFD23E; color: #111; } [data-theme="pixel"] .sidebar-link.active i { color: #111; } [data-theme="pixel"] .sidebar-link.active::before { display: none; } [data-theme="pixel"] .sidebar-brand-icon { border-radius: 0; box-shadow: 2px 2px 0 #000; } /* ── VIDRIO · translúcido real: malla de color + escarcha ──── */ [data-theme="vidrio"] body { background: radial-gradient(560px 380px at 8% -5%, rgba(255,150,90,.16), transparent 60%), radial-gradient(640px 420px at 96% 4%, rgba(124,92,255,.16), transparent 60%), radial-gradient(700px 480px at 50% 108%, rgba(29,158,117,.12), transparent 60%), var(--bg-base); background-attachment: fixed; } [data-theme="vidrio"] .panel, [data-theme="vidrio"] .kpi, [data-theme="vidrio"] .hero, [data-theme="vidrio"] .stat, [data-theme="vidrio"] .ocard, [data-theme="vidrio"] .aml-panel, [data-theme="vidrio"] .saldo-card, [data-theme="vidrio"] .portal-card { background-color: rgba(255,255,255,.55); backdrop-filter: blur(14px) saturate(1.5); -webkit-backdrop-filter: blur(14px) saturate(1.5); border: 1px solid rgba(255,255,255,.75); box-shadow: 0 12px 32px -22px rgba(36,31,53,.4), inset 0 1px 0 rgba(255,255,255,.9); } [data-theme="vidrio"] .admin-sidebar { background: rgba(255,255,255,.5); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); border-right: 1px solid rgba(255,255,255,.7); } [data-theme="vidrio"] h1, [data-theme="vidrio"] .page-title { font-weight: 800; letter-spacing: -.03em; } [data-theme="vidrio"] .kicker { color: #7C5CFF; } [data-theme="vidrio"] th { color: #7C5CFF; } [data-theme="vidrio"] .btn-brand, [data-theme="vidrio"] .btn-primary, [data-theme="vidrio"] .frm button { border-radius: 999px; box-shadow: 0 8px 20px -10px rgba(124,92,255,.7); } [data-theme="vidrio"] .frm input, [data-theme="vidrio"] .form-control, [data-theme="vidrio"] .portal-input { background: rgba(255,255,255,.6); } /* ── HORMIGÓN · obra gruesa: manchas, estarcido, encofrado ──── */ [data-theme="hormigon"] body { background: linear-gradient(12deg, transparent 0 46%, rgba(0,0,0,.05) 49%, transparent 52%), linear-gradient(283deg, transparent 0 55%, rgba(255,255,255,.1) 58%, transparent 61%), radial-gradient(520px 300px at 80% 12%, rgba(0,0,0,.05), transparent 60%), var(--bg-base); } [data-theme="hormigon"] h1, [data-theme="hormigon"] .page-title { border-left: 8px solid #1F1F1C; padding-left: 14px; } [data-theme="hormigon"] .kicker { color: #C43A08; } [data-theme="hormigon"] .panel, [data-theme="hormigon"] .kpi, [data-theme="hormigon"] .hero, [data-theme="hormigon"] .stat, [data-theme="hormigon"] .ocard, [data-theme="hormigon"] .aml-panel, [data-theme="hormigon"] .saldo-card, [data-theme="hormigon"] .portal-card { border: 2px solid #55554F; border-radius: 0 !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 4px 4px 0 rgba(0,0,0,.22); } [data-theme="hormigon"] .panel h2, [data-theme="hormigon"] .panel-title { color: #1F1F1C; font-weight: 800; } [data-theme="hormigon"] th { color: #33332F; font-weight: 700; } [data-theme="hormigon"] .btn, [data-theme="hormigon"] .btn-primary, [data-theme="hormigon"] .btn-brand, [data-theme="hormigon"] .frm button { border: 2px solid #1F1F1C; border-radius: 0 !important; text-transform: uppercase; font-weight: 800; letter-spacing: .08em; } [data-theme="hormigon"] .admin-sidebar { background: #9B9B97; border-right: 2px solid #55554F; } [data-theme="hormigon"] .sidebar-brand-name { text-transform: uppercase; font-weight: 800; letter-spacing: .06em; } [data-theme="hormigon"] .sidebar-link.active::before { width: 4px; } [data-theme="hormigon"] .sidebar-brand-icon { border-radius: 0; } /* ── NEÓN · letrero encendido: tubo, parpadeo, resplandor ──── */ [data-theme="neon"] body { background: radial-gradient(620px 340px at 12% 108%, rgba(255,95,138,.1), transparent 60%), radial-gradient(700px 380px at 88% 106%, rgba(103,232,249,.08), transparent 60%), var(--bg-base); background-attachment: fixed; } [data-theme="neon"] h1, [data-theme="neon"] .page-title { color: #FFE9D8; text-shadow: 0 0 7px rgba(255,157,92,.9), 0 0 20px rgba(255,157,92,.55), 0 0 42px rgba(255,157,92,.3); animation: neon-flicker 9s linear infinite; } @keyframes neon-flicker { 0%, 86%, 88%, 100% { opacity: 1; } 87% { opacity: .6; } 92.5% { opacity: .85; } } [data-theme="neon"] .panel, [data-theme="neon"] .kpi, [data-theme="neon"] .hero, [data-theme="neon"] .stat, [data-theme="neon"] .ocard, [data-theme="neon"] .aml-panel, [data-theme="neon"] .saldo-card, [data-theme="neon"] .portal-card { border: 1px solid rgba(255,157,92,.34); box-shadow: 0 0 16px -8px rgba(255,157,92,.55), inset 0 0 22px -18px rgba(255,157,92,.5); } [data-theme="neon"] .panel h2, [data-theme="neon"] .panel-title { color: #FF9D5C; text-shadow: 0 0 10px rgba(255,157,92,.5); } [data-theme="neon"] .kicker { color: #67E8F9; text-shadow: 0 0 8px rgba(103,232,249,.6); } [data-theme="neon"] .btn-brand, [data-theme="neon"] .btn-primary, [data-theme="neon"] .frm button { background: transparent; color: #FF9D5C; border: 1.5px solid #FF9D5C; box-shadow: 0 0 12px -4px rgba(255,157,92,.8), inset 0 0 10px -6px rgba(255,157,92,.7); text-shadow: 0 0 6px rgba(255,157,92,.7); } [data-theme="neon"] .btn-brand:hover, [data-theme="neon"] .btn-primary:hover, [data-theme="neon"] .frm button:hover { background: rgba(255,157,92,.14); color: #FFB37E; border-color: #FFB37E; } [data-theme="neon"] .admin-sidebar { background: #0A0E20; } [data-theme="neon"] .sidebar-brand-name { color: #FF9D5C; text-shadow: 0 0 9px rgba(255,157,92,.7); } [data-theme="neon"] .sidebar-link.active { text-shadow: 0 0 8px rgba(255,157,92,.6); } [data-theme="neon"] .sidebar-link.active::before { box-shadow: 0 0 10px rgba(255,157,92,.9); } /* ── METAL · placa mecanizada: cepillado, remaches, grabado ── */ [data-theme="metal"] body { background: repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, rgba(0,0,0,.015) 1px 2px, transparent 2px 3px), linear-gradient(180deg, #DCDEE0, #CBCED1); } [data-theme="metal"] .panel, [data-theme="metal"] .kpi, [data-theme="metal"] .hero, [data-theme="metal"] .stat, [data-theme="metal"] .ocard, [data-theme="metal"] .aml-panel, [data-theme="metal"] .saldo-card, [data-theme="metal"] .portal-card { background-color: #ECEEF0; background-image: radial-gradient(circle, #F8FAFB 0 28%, #798086 55%, transparent 66%), radial-gradient(circle, #F8FAFB 0 28%, #798086 55%, transparent 66%), radial-gradient(circle, #F8FAFB 0 28%, #798086 55%, transparent 66%), radial-gradient(circle, #F8FAFB 0 28%, #798086 55%, transparent 66%), linear-gradient(180deg, #F2F4F5, #E3E6E8); background-size: 7px 7px, 7px 7px, 7px 7px, 7px 7px, 100% 100%; background-position: 9px 9px, calc(100% - 9px) 9px, 9px calc(100% - 9px), calc(100% - 9px) calc(100% - 9px), 0 0; background-repeat: no-repeat; border: 1px solid #9AA0A5; box-shadow: inset 0 1px 0 #FFF, 0 2px 4px -2px rgba(43,46,48,.4); } [data-theme="metal"] h1, [data-theme="metal"] .page-title { text-transform: uppercase; font-weight: 700; letter-spacing: .06em; text-shadow: 0 1px 0 rgba(255,255,255,.75); } [data-theme="metal"] .kicker { color: #D84E09; } [data-theme="metal"] th { color: #5A6065; text-shadow: 0 1px 0 rgba(255,255,255,.7); } [data-theme="metal"] .btn, [data-theme="metal"] .btn-secondary, [data-theme="metal"] .theme-dot { background: linear-gradient(180deg, #F4F6F7, #D8DBDE); border: 1px solid #7D8388; color: #2B2E30; border-radius: 3px; box-shadow: inset 0 1px 0 #FFF, 0 1px 2px rgba(0,0,0,.25); } [data-theme="metal"] .btn-brand, [data-theme="metal"] .btn-primary, [data-theme="metal"] .frm button { background: linear-gradient(180deg, #F2652A, #C64607); border: 1px solid #8F3305; color: #FFF; border-radius: 3px; box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 1px 2px rgba(0,0,0,.3); } [data-theme="metal"] .btn-brand:hover, [data-theme="metal"] .btn-primary:hover, [data-theme="metal"] .frm button:hover { background: linear-gradient(180deg, #FF7438, #D64F0A); color: #FFF; } [data-theme="metal"] .admin-sidebar { background: linear-gradient(90deg, #D9DBDD, #CDD0D3); border-right: 1px solid #9AA0A5; } [data-theme="metal"] .sidebar-brand-name { text-transform: uppercase; letter-spacing: .08em; font-weight: 700; } [data-theme="metal"] .sidebar-brand-icon { background: linear-gradient(180deg, #F2652A, #C64607); border-radius: 2px; } /* ── AURORA · SaaS luminoso: degradé vivo que respira ──────── */ [data-theme="aurora"] body { background-image: radial-gradient(520px 360px at 14% 0%, rgba(255,130,70,.14), transparent 65%), radial-gradient(600px 400px at 86% 8%, rgba(139,92,246,.13), transparent 65%), radial-gradient(640px 440px at 50% 100%, rgba(29,158,117,.1), transparent 65%); background-attachment: fixed; animation: aurora-drift 26s ease-in-out infinite alternate; } @keyframes aurora-drift { to { background-position: 70px 30px, -60px 24px, 0 -50px; } } [data-theme="aurora"] h1, [data-theme="aurora"] .page-title { background: linear-gradient(90deg, #7C46F0, #1D9E75 75%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; } [data-theme="aurora"] .kicker { color: #8B5CF6; } [data-theme="aurora"] .panel, [data-theme="aurora"] .kpi, [data-theme="aurora"] .hero, [data-theme="aurora"] .stat, [data-theme="aurora"] .ocard, [data-theme="aurora"] .aml-panel, [data-theme="aurora"] .saldo-card, [data-theme="aurora"] .portal-card { border: 1px solid #EDEAF6; border-top: 3px solid #8B5CF6; box-shadow: 0 20px 40px -30px rgba(124,70,240,.35); } [data-theme="aurora"] .btn, [data-theme="aurora"] .btn-secondary, [data-theme="aurora"] .theme-dot { border-radius: 999px; } [data-theme="aurora"] .btn-brand, [data-theme="aurora"] .btn-primary, [data-theme="aurora"] .frm button { border-radius: 999px; background: linear-gradient(90deg, #8B5CF6, #6D3EF0); box-shadow: 0 8px 20px -10px rgba(139,92,246,.7); color: #FFF; border: none; } [data-theme="aurora"] .btn-brand:hover, [data-theme="aurora"] .btn-primary:hover, [data-theme="aurora"] .frm button:hover { background: linear-gradient(90deg, #9D74F8, #7C50F2); color: #FFF; } [data-theme="aurora"] th { color: #6D5BB8; } [data-theme="aurora"] .admin-sidebar { background: rgba(255,255,255,.75); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } [data-theme="aurora"] .sidebar-link { border-radius: 999px; } [data-theme="aurora"] .sidebar-link.active { background: rgba(139,92,246,.1); } [data-theme="aurora"] .sidebar-link.active::before { display: none; } /* ── TOPOGRÁFICO · carta de terreno: cotas, grilla, marcador ── */ [data-theme="topo"] .admin-content { background-image: repeating-radial-gradient(ellipse 340px 220px at 82% 10%, transparent 0 13px, rgba(122,106,69,.14) 13px 14px), repeating-radial-gradient(ellipse 420px 300px at 8% 85%, transparent 0 17px, rgba(63,94,122,.1) 17px 18px), repeating-linear-gradient(0deg, transparent 0 39px, rgba(122,106,69,.06) 39px 40px), repeating-linear-gradient(90deg, transparent 0 39px, rgba(122,106,69,.06) 39px 40px); } [data-theme="topo"] .page-title::before, [data-theme="topo"] h1::before { content: "▲ "; color: #FF4500; font-size: .7em; vertical-align: 3px; } [data-theme="topo"] .kicker::after { content: " · 33°27′S 70°40′W"; color: #B3AB97; letter-spacing: .12em; } [data-theme="topo"] .panel, [data-theme="topo"] .kpi, [data-theme="topo"] .hero, [data-theme="topo"] .stat, [data-theme="topo"] .ocard, [data-theme="topo"] .aml-panel, [data-theme="topo"] .saldo-card, [data-theme="topo"] .portal-card { border: 1px solid #DDD3BC; border-top: 1px dashed #C7BA9C; box-shadow: inset 0 1px 0 rgba(255,255,255,.7); } [data-theme="topo"] th { color: #8C6B2F; } [data-theme="topo"] .btn-brand, [data-theme="topo"] .btn-primary, [data-theme="topo"] .frm button { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .1em; } [data-theme="topo"] .admin-sidebar { background: #F8F4E9; } [data-theme="topo"] .sidebar-brand-icon { background: #FF4500; border-radius: 0; clip-path: polygon(50% 0, 100% 100%, 0 100%); } /* ── DUOTONO · dos tintas: semitono, punto final, regla plena ── */ [data-theme="duotono"] .admin-content { background-image: radial-gradient(rgba(255,255,255,.05) 1px, transparent 1.3px); background-size: 7px 7px; } [data-theme="duotono"] body::before { content: ""; position: fixed; right: -70px; bottom: -70px; width: 430px; height: 430px; pointer-events: none; z-index: 0; opacity: .35; background: radial-gradient(circle, rgba(255,69,0,.55) 1.5px, transparent 2.1px) 0 0/14px 14px; -webkit-mask-image: radial-gradient(circle at 100% 100%, #000, transparent 72%); mask-image: radial-gradient(circle at 100% 100%, #000, transparent 72%); } [data-theme="duotono"] h1, [data-theme="duotono"] .page-title { font-weight: 900; letter-spacing: -.03em; text-transform: uppercase; } [data-theme="duotono"] .page-title::after { content: "."; color: #FF4500; } [data-theme="duotono"] .kicker { color: #FF4500; letter-spacing: .3em; } [data-theme="duotono"] .kicker::before { background: #FF4500; } [data-theme="duotono"] .panel, [data-theme="duotono"] .kpi, [data-theme="duotono"] .hero, [data-theme="duotono"] .stat, [data-theme="duotono"] .ocard, [data-theme="duotono"] .aml-panel, [data-theme="duotono"] .saldo-card, [data-theme="duotono"] .portal-card { border-left: 3px solid #FF4500; border-radius: 0 !important; } [data-theme="duotono"] .panel h2, [data-theme="duotono"] .panel-title { color: #FF4500; border-bottom: 2px solid #FF4500; padding-bottom: 8px; } [data-theme="duotono"] th { color: #C4A28C; } [data-theme="duotono"] .btn, [data-theme="duotono"] .btn-primary, [data-theme="duotono"] .btn-brand, [data-theme="duotono"] .frm button, [data-theme="duotono"] .theme-dot { border-radius: 0 !important; font-weight: 800; text-transform: uppercase; box-shadow: 4px 4px 0 rgba(255,69,0,.3); } [data-theme="duotono"] .btn-brand:hover, [data-theme="duotono"] .btn-primary:hover, [data-theme="duotono"] .frm button:hover { transform: translate(-1px,-1px); box-shadow: 5px 5px 0 rgba(255,69,0,.4); } [data-theme="duotono"] .admin-sidebar { background: #0F0C0A; border-right: 1px solid #33291F; } [data-theme="duotono"] .sidebar-section-label { color: #FF4500; } [data-theme="duotono"] .sidebar-brand-name { font-weight: 900; text-transform: uppercase; } [data-theme="duotono"] .sidebar-link.active::before { width: 4px; } [data-theme="duotono"] ::selection { background: #FF4500; color: #FFF5EE; } /* ── NEO-TOKIO · callejón glitch: kana vertical, corte cian ── */ [data-theme="neotokio"] body { background: radial-gradient(700px 520px at 0% 50%, rgba(240,0,255,.07), transparent 60%) fixed, var(--bg-base); } [data-theme="neotokio"] body::before { content: "東京 · オペレーション · ネオ東京"; position: fixed; top: 50%; right: 10px; transform: translateY(-50%); writing-mode: vertical-rl; font-family: var(--font-mono); font-size: 11px; letter-spacing: .6em; color: rgba(240,0,255,.22); pointer-events: none; z-index: 0; } [data-theme="neotokio"] h1, [data-theme="neotokio"] .page-title { text-transform: uppercase; letter-spacing: .02em; text-shadow: -2px 0 rgba(240,0,255,.45), 2px 0 rgba(0,229,255,.45); } [data-theme="neotokio"] h2 { text-shadow: -1.5px 0 rgba(240,0,255,.35), 1.5px 0 rgba(0,229,255,.35); } [data-theme="neotokio"] .kicker { color: #00E5FF; } [data-theme="neotokio"] .panel, [data-theme="neotokio"] .kpi, [data-theme="neotokio"] .hero, [data-theme="neotokio"] .stat, [data-theme="neotokio"] .ocard, [data-theme="neotokio"] .aml-panel, [data-theme="neotokio"] .saldo-card, [data-theme="neotokio"] .portal-card { background-color: var(--bg-card); border-left: 2px solid #F000FF; background-image: linear-gradient(rgba(0,229,255,.7), rgba(0,229,255,.7)), linear-gradient(rgba(0,229,255,.7), rgba(0,229,255,.7)); background-size: 14px 1.5px, 1.5px 14px; background-position: right bottom, right bottom; background-repeat: no-repeat; } [data-theme="neotokio"] th { color: #58C4D4; } [data-theme="neotokio"] .btn-brand, [data-theme="neotokio"] .btn-primary, [data-theme="neotokio"] .frm button { border-radius: 0; font-weight: 700; text-transform: uppercase; box-shadow: 3px 0 0 rgba(0,229,255,.6); } [data-theme="neotokio"] .admin-sidebar { background: #0A0512; border-right: 1px solid #2B1F42; } [data-theme="neotokio"] .sidebar-brand-name { font-weight: 800; text-transform: uppercase; text-shadow: -1.5px 0 rgba(240,0,255,.6), 1.5px 0 rgba(0,229,255,.6); } [data-theme="neotokio"] ::selection { background: #F000FF; color: #0C0714; } /* ── MISIÓN · sala de control: grilla, módulos, luz de estado ── */ [data-theme="mision"] body { background-image: linear-gradient(rgba(94,242,124,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(94,242,124,.045) 1px, transparent 1px); background-size: 34px 34px; } [data-theme="mision"] h1, [data-theme="mision"] .page-title, [data-theme="mision"] h2, [data-theme="mision"] .stat-value, [data-theme="mision"] .kpi .val, [data-theme="mision"] .sidebar-brand-name { text-shadow: 0 0 9px rgba(94,242,124,.5); } [data-theme="mision"] .page-title::before, [data-theme="mision"] h1::before { content: "● "; color: #5EF27C; font-size: .55em; vertical-align: 4px; animation: msn-blink 2.4s steps(2) infinite; } @keyframes msn-blink { 50% { opacity: .2; } } [data-theme="mision"] .kicker { color: #5EF27C; } [data-theme="mision"] .panel h2, [data-theme="mision"] .panel-title { border: 1px solid #1F5230; background: rgba(94,242,124,.05); padding: 4px 10px; letter-spacing: .26em; width: fit-content; } [data-theme="mision"] .panel, [data-theme="mision"] .kpi, [data-theme="mision"] .hero, [data-theme="mision"] .stat, [data-theme="mision"] .ocard, [data-theme="mision"] .aml-panel, [data-theme="mision"] .saldo-card, [data-theme="mision"] .portal-card { border: 1px solid #1F5230; border-radius: 0 !important; box-shadow: inset 0 0 26px -18px rgba(94,242,124,.45); } [data-theme="mision"] th { color: #3F9A55; letter-spacing: .2em; } [data-theme="mision"] .btn, [data-theme="mision"] .btn-primary, [data-theme="mision"] .btn-brand, [data-theme="mision"] .frm button, [data-theme="mision"] .theme-dot { border-radius: 0; text-transform: uppercase; letter-spacing: .18em; font-weight: 700; } [data-theme="mision"] .admin-sidebar { background: #040A05; border-right: 1px solid #153820; } [data-theme="mision"] .sidebar-link.active::before { background: #5EF27C; box-shadow: 0 0 8px rgba(94,242,124,.8); } [data-theme="mision"] ::selection { background: #5EF27C; color: #050705; } /* ═══ v3 · pasada de coherencia (16-jul) ═══════════════════════ La auditoría visual de las OTRAS vistas (dashboard/AML) cazó cajas translúcidas ilegibles sobre fondos de tema medios (el fix de base opaca vive en p2p_dashboard.html), y quedaban sin voz los modales, scrollbars, hovers de fila y numerales. Acá cada tema fuerte termina la frase. ═══════════════════════════════ */ /* retro98: lo que pisa el escritorio teal se lee como rótulo win98 */ [data-theme="retro98"] .trust-strip { color: #FFFFFF; text-shadow: 1px 1px 0 rgba(0,0,0,.55); } [data-theme="retro98"] .status-strip { background: #D4D0C8; color: #806000; border-radius: 0; border-top: 2px solid #FFF; border-left: 2px solid #FFF; border-right: 2px solid #5A5A5A; border-bottom: 2px solid #5A5A5A; } [data-theme="retro98"] .status-strip.urgent { background: #D4D0C8; color: #B00000; } /* dentro de la barra de título navy, el texto acompaña en claro */ [data-theme="retro98"] .card-header .text-secondary, [data-theme="retro98"] .card-header .small, [data-theme="retro98"] .card-header .orders-live-badge { color: #DCE4F4 !important; } /* botones de ventana en la barra de título (el h1 de cada vista) */ [data-theme="retro98"] .page-title::after, [data-theme="retro98"] h1::after { content: " ▁ ▢ ✕"; margin-left: 26px; font-size: .62em; letter-spacing: 5px; opacity: .95; vertical-align: 1px; } [data-theme="retro98"] .modal-content { background: #D4D0C8; color: #1F1F1F; border-radius: 0; border-top: 2px solid #FFF; border-left: 2px solid #FFF; border-right: 2px solid #5A5A5A; border-bottom: 2px solid #5A5A5A; } [data-theme="retro98"] .modal-header { background: linear-gradient(90deg, #000080, #1084D0); border-radius: 0; } [data-theme="retro98"] .modal-header .modal-title { color: #FFFFFF; } [data-theme="retro98"] .sidebar-user-avatar { border-radius: 0; box-shadow: inset -1px -1px 0 #000, inset 1px 1px 0 #DFDFDF; } [data-theme="hormigon"] .trust-strip { color: #1F1F1C; } /* modales a juego — aparecen justo al liberar/confirmar plata */ [data-theme="neobrutal"] .modal-content { border: 3px solid #111; border-radius: 0; box-shadow: 8px 8px 0 #111; } [data-theme="pixel"] .modal-content { border: 2px solid #000; border-radius: 0; box-shadow: 6px 6px 0 #000; } [data-theme="vhs"] .modal-content { border-left: 3px solid #FF3366; border-radius: 0; } [data-theme="hud"] .modal-content { background-color: var(--bg-card); border-radius: 0; background-image: linear-gradient(var(--brand-primary), var(--brand-primary)), linear-gradient(var(--brand-primary), var(--brand-primary)), linear-gradient(var(--brand-primary), var(--brand-primary)), linear-gradient(var(--brand-primary), var(--brand-primary)); background-size: 18px 2px, 2px 18px, 18px 2px, 2px 18px; background-position: left top, left top, right bottom, right bottom; background-repeat: no-repeat; } [data-theme="duotono"] .modal-content { border-left: 3px solid #FF4500; border-radius: 0; } [data-theme="mision"] .modal-content { border: 1px solid #1F5230; border-radius: 0; box-shadow: inset 0 0 26px -18px rgba(94,242,124,.45); } [data-theme="oro"] .modal-content { border-color: #3A3426; box-shadow: inset 0 0 0 1px rgba(201,162,39,.2); } [data-theme="neotokio"] .modal-content { border-left: 2px solid #F000FF; } /* scrollbars con firma */ [data-theme="neobrutal"] ::-webkit-scrollbar { width: 12px; height: 12px; } [data-theme="neobrutal"] ::-webkit-scrollbar-thumb { background: #111; border-radius: 0; } [data-theme="neobrutal"] ::-webkit-scrollbar-track { background: #FFD23E; } [data-theme="hud"] ::-webkit-scrollbar-thumb { background: #1D3A47; } [data-theme="hud"] ::-webkit-scrollbar-thumb:hover { background: #67E8F9; } [data-theme="vhs"] ::-webkit-scrollbar-thumb { background: #FF3366; border-radius: 0; } [data-theme="pixel"] ::-webkit-scrollbar { width: 12px; height: 12px; } [data-theme="pixel"] ::-webkit-scrollbar-thumb { background: #FFD23E; border-radius: 0; border: 2px solid #000; } [data-theme="duotono"] ::-webkit-scrollbar-thumb { background: #FF4500; border-radius: 0; } [data-theme="mision"] ::-webkit-scrollbar-thumb { background: #1F5230; } /* el hover de fila habla el idioma del tema (hud ya lo hacía) */ [data-theme="vhs"] .tbl tbody tr:hover, [data-theme="vhs"] .data-table tbody tr:hover td { background: rgba(255,51,102,.07); } [data-theme="duotono"] .tbl tbody tr:hover, [data-theme="duotono"] .data-table tbody tr:hover td { background: rgba(255,69,0,.08); } [data-theme="neotokio"] .tbl tbody tr:hover, [data-theme="neotokio"] .data-table tbody tr:hover td { background: rgba(240,0,255,.07); } [data-theme="mision"] .tbl tbody tr:hover, [data-theme="mision"] .data-table tbody tr:hover td { background: rgba(94,242,124,.06); } [data-theme="vaporwave"] .tbl tbody tr:hover, [data-theme="vaporwave"] .data-table tbody tr:hover td { background: rgba(64,224,208,.08); } /* numerales con la voz del tema (sombra sutil: los datos mandan) */ [data-theme="hud"] .stat-value, [data-theme="hud"] .kpi .val, [data-theme="hud"] .hero-val { text-shadow: 0 0 12px rgba(103,232,249,.3); } [data-theme="vhs"] .stat-value, [data-theme="vhs"] .kpi .val, [data-theme="vhs"] .hero-val { text-shadow: -1px 0 rgba(255,0,80,.3), 1px 0 rgba(0,220,255,.3); } [data-theme="neon"] .stat-value, [data-theme="neon"] .kpi .val, [data-theme="neon"] .hero-val { text-shadow: 0 0 14px rgba(255,157,92,.35); } /* flashes con firma en los asignados */ [data-theme="vhs"] .portal-flash { border-left: 3px solid #FF3366; border-radius: 0; } [data-theme="hud"] .portal-flash { border-left: 3px solid #67E8F9; border-radius: 0; } [data-theme="duotono"] .portal-flash { border-left: 3px solid #FF4500; border-radius: 0; } /* avatares que siguen la forma del tema */ [data-theme="neobrutal"] .sidebar-user-avatar { border: 2px solid #111; border-radius: 0; box-shadow: 2px 2px 0 #111; } [data-theme="pixel"] .sidebar-user-avatar { border-radius: 0; border: 2px solid #000; } [data-theme="hud"] .sidebar-user-avatar { border-radius: 0; box-shadow: 0 0 0 1px #1D3A47; } /* Toda firma con movimiento se apaga si el usuario pide calma. */ @media (prefers-reduced-motion: reduce) { [data-theme="vhs"] .sidebar-brand-name::after, [data-theme="vhs"] body::before, [data-theme="hud"] body::before, [data-theme="hud"] .panel h2::before, [data-theme="hud"] .panel-title::before, [data-theme="pixel"] .page-title::after, [data-theme="neon"] h1, [data-theme="neon"] .page-title, [data-theme="aurora"] body, [data-theme="mision"] .page-title::before, [data-theme="mision"] h1::before { animation: none; } } /* components.css */ /* ============================================================= Portal San Cristobal — Componentes base Fase 1: Button (3 variantes), Input, Card, Badge (neutro), Modal base ============================================================= */ /* ============================================================= BUTTON — 3 variantes: primary, secondary, ghost Mantenemos compatibilidad con clases existentes (btn-primary, btn-neon, btn-outline-primary, btn-ghost-dark) mapeándolas al estilo nuevo sin cambiar su "API" desde los templates. ============================================================= */ .btn, .btn-primary, .btn-secondary, .btn-brand, .btn-ghost, .btn-neon, .btn-outline-primary, .btn-ghost-dark { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 16px; border-radius: var(--radius-lg); font-family: var(--font-sans); font-weight: 500; font-size: 14px; line-height: 1; text-decoration: none; cursor: pointer; transition: all .2s ease; border: 1px solid transparent; white-space: nowrap; } /* --- PRIMARY (CTA claro sobre fondo oscuro) --- */ .btn-primary, .btn-primary:not(:disabled):not(.disabled), .btn-neon { background-color: var(--text-primary); color: var(--bg-base); border: 1px solid transparent; } .btn-primary:hover, .btn-neon:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(237, 237, 237, 0.15); background-color: var(--text-primary); color: var(--bg-base); border-color: transparent; } .btn-primary:active, .btn-primary:focus, .btn-neon:active, .btn-neon:focus { transform: translateY(0); background-color: var(--text-primary); color: var(--bg-base); box-shadow: 0 4px 12px rgba(237, 237, 237, 0.12); outline: none; } /* --- BRAND (acción primaria positiva de una vista: naranja/terracota de marca, adaptable por tema vía --brand-primary). UNA por pantalla; el verde queda reservado a ESTADO (toggles on, "en vivo"), nunca a acción. --- */ .btn-brand { background-color: var(--brand-primary); color: var(--brand-primary-contrast); border: 1px solid transparent; font-weight: 600; } .btn-brand:hover { transform: translateY(-1px); background-color: var(--brand-primary-hover); color: var(--brand-primary-contrast); } .btn-brand:active, .btn-brand:focus { transform: translateY(0); background-color: var(--brand-primary-hover); color: var(--brand-primary-contrast); outline: none; } .btn-brand[disabled] { opacity: .55; cursor: progress; transform: none; } /* --- SECONDARY --- */ .btn-secondary, .btn-outline-primary { background-color: transparent; color: var(--text-secondary); border: 1px solid var(--border); } .btn-secondary:hover, .btn-outline-primary:hover { border-color: var(--text-ghost); color: var(--text-primary); background-color: transparent; } .btn-secondary:active, .btn-secondary:focus, .btn-outline-primary:active, .btn-outline-primary:focus { background-color: transparent; color: var(--text-primary); outline: none; } /* Anillo de foco de TECLADO (a11y): las reglas :focus de arriba ponían outline:none y borraban el indicador — al navegar con Tab (o los atajos ↑↓/C/L del cockpit) no se veía qué elemento estaba activo. :focus-visible lo restaura SOLO para teclado (no molesta al click con mouse). --border-focus está definido por cada tema. */ .btn:focus-visible, .btn-primary:focus-visible, .btn-secondary:focus-visible, .btn-brand:focus-visible, .btn-outline-primary:focus-visible, .btn-outline-secondary:focus-visible, .btn-outline-light:focus-visible, .btn-ghost:focus-visible, .btn-ghost-dark:focus-visible, .csel-btn:focus-visible, .ocard:focus-visible, .stat-click:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; } /* --- GHOST --- */ .btn-ghost, .btn-ghost-dark { background-color: transparent; color: var(--text-muted); border: 1px solid transparent; } .btn-ghost:hover, .btn-ghost-dark:hover { color: var(--text-primary); background-color: transparent; border-color: transparent; } /* ============================================================= CUSTOM SELECT (.csel) — dropdown que respeta el tema (el popup del con data-csel y cargá static/js/csel.js. El cockpit tiene su copia inline; esta es la versión compartida para el resto de las vistas. ============================================================= */ select.csel-native{ position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); border:0; } .csel{ position:relative; display:inline-block; min-width:110px; } .csel-btn{ display:flex; align-items:center; justify-content:space-between; gap:8px; width:100%; background:var(--bg-card-alt); color:var(--text-primary); border:1px solid var(--border); border-radius:var(--radius-md); padding:10px 12px; font:400 13px/1.2 var(--font-mono,"JetBrains Mono",ui-monospace,"SF Mono",Menlo,monospace); cursor:pointer; text-align:left; white-space:nowrap; transition:border-color .12s ease; } .csel-btn:hover{ border-color:var(--border-hover); } .csel-btn:focus-visible{ outline:2px solid var(--border-focus); outline-offset:1px; } .csel[data-open="true"] .csel-btn{ border-color:var(--border-hover); } .csel-chev{ flex:0 0 auto; font-size:10px; opacity:.55; transition:transform .15s ease; } .csel[data-open="true"] .csel-chev{ transform:rotate(180deg); opacity:.9; } .csel-menu{ position:absolute; top:calc(100% + 5px); left:0; min-width:100%; z-index:1200; background:var(--bg-card-alt); border:1px solid var(--border-hover); border-radius:6px; box-shadow:0 12px 34px rgba(0,0,0,.5); padding:4px; margin:0; list-style:none; max-height:340px; overflow-y:auto; display:none; } .csel[data-open="true"] .csel-menu{ display:block; animation:cselIn .12s ease; } @keyframes cselIn{ from{ opacity:0; transform:translateY(-4px);} to{ opacity:1; transform:none;} } .csel-opt{ display:flex; align-items:center; padding:8px 12px 8px 24px; border-radius:4px; color:var(--text-secondary); position:relative; cursor:pointer; white-space:nowrap; font:400 13px/1.2 var(--font-mono,"JetBrains Mono",ui-monospace,"SF Mono",Menlo,monospace); } .csel-opt:hover, .csel-opt.is-active{ background:var(--bg-hover); color:var(--text-primary); } .csel-opt[aria-selected="true"]{ color:var(--text-primary); font-weight:500; } .csel-opt[aria-selected="true"]::before{ content:"✓"; position:absolute; left:8px; color:var(--accent-live); font-size:11px; } @media (prefers-reduced-motion:reduce){ .csel-chev,.csel[data-open="true"] .csel-menu{ transition:none; animation:none; } } /* Checkboxes y radios nativos: acento de MARCA unificado. Antes cada vista heredaba lo que caía (azul de Bootstrap en el Bot, naranja en Admins); accent-color los alinea a --brand-primary en todos los temas. No afecta a los toggles custom .sw (su input va oculto). */ input[type="checkbox"], input[type="radio"], .form-check-input, .btn-check { accent-color: var(--brand-primary); } /* ============================================================= INPUT — único estilo neutro para text / textarea / select ============================================================= */ .portal-input, .form-control, .form-select { background-color: var(--bg-card-alt); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 10px 12px; color: var(--text-primary); font-family: var(--font-sans); font-size: 13px; line-height: 1.4; outline: none; transition: border-color .18s ease, background-color .18s ease; width: 100%; } .portal-input:focus, .form-control:focus, .form-select:focus { border-color: var(--text-ghost); background-color: var(--bg-card-alt); color: var(--text-primary); box-shadow: none; outline: none; } .portal-input::placeholder, .form-control::placeholder { color: var(--text-faint); } .form-select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23888888'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%23888888' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; background-size: 14px; padding-right: 32px; } .form-select option { background-color: var(--bg-card-alt); color: var(--text-primary); } label, .form-label { color: var(--text-secondary); font-size: 12px; font-weight: 500; margin-bottom: 6px; } /* ============================================================= CARD — base + variante interactive ============================================================= */ .portal-card { background-color: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: 20px; transition: border-color .2s ease, background-color .2s ease, transform .2s ease; position: relative; overflow: hidden; } /* Variantes de accent (antes daban colores neón). Mantengo las clases para no romper templates pero renderizan igual al base. */ .portal-card--money, .portal-card--brand, .portal-card--action { border-left: 1px solid var(--border); } /* Variante interactive (stat cards clickeables) */ .portal-card.hoverable, .portal-card--interactive { cursor: pointer; } .portal-card.hoverable:hover, .portal-card--interactive:hover { border-color: var(--border-hover); background-color: var(--bg-card-alt); transform: translateY(-2px); } /* ============================================================= BADGE — estilo único neutro. Todas las variantes semánticas (success/warning/danger/info/indigo/violet/sky/mint/amber/pink/ coral/data/action/neutral) renderizan con el MISMO look. La palabra comunica, no el color. ============================================================= */ .chip, .badge { display: inline-flex; align-items: center; gap: 4px; background-color: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 3px 8px; font-family: var(--font-sans); font-size: 11px; font-weight: 500; line-height: 1.4; color: var(--text-muted); letter-spacing: 0.01em; white-space: nowrap; } /* Variantes heredadas → todas renderizan neutro */ .chip-indigo, .chip-violet, .chip-sky, .chip-mint, .chip-amber, .chip-pink, .chip-coral, .chip-neutral, .chip-success, .chip-warning, .chip-danger, .chip-data, .chip-action, .chip-info { background-color: var(--bg-card); border: 1px solid var(--border); color: var(--text-muted); } /* ============================================================= MODAL — estructura base (overlay + container + entrance) Usamos los hooks de Bootstrap 5 modal sin romper el JS/ARIA. ============================================================= */ .modal-backdrop { background-color: rgba(0, 0, 0, 0.65); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .modal-backdrop.show { opacity: 1; } .modal-content { background-color: var(--bg-card); border: 1px solid var(--border-hover); border-radius: var(--radius-2xl); color: var(--text-primary); } .modal-header, .modal-footer { border-color: var(--border); } .modal-title { color: var(--text-primary); font-weight: 500; letter-spacing: -.005em; } /* Entrance animation */ .modal.fade .modal-dialog { transition: transform .4s cubic-bezier(0.16, 1, 0.3, 1), opacity .4s cubic-bezier(0.16, 1, 0.3, 1); transform: translateY(20px) scale(0.96); opacity: 0; } .modal.show .modal-dialog { transform: translate(0, 0) scale(1); opacity: 1; } /* Close button sobre fondo oscuro */ .modal .btn-close { filter: invert(1) grayscale(1) brightness(1.8); opacity: .5; } .modal .btn-close:hover { opacity: .9; } /* ============================================================= OVERRIDES GLOBALES: forzar max font-weight 500 en la app. Bootstrap ofrece fw-semibold (600) y fw-bold (700) como utilities; en este portal NADA debe superar 500. ============================================================= */ .fw-semibold, .fw-bold { font-weight: 500 !important; } /* Transiciones globales consistentes */ .portal-card, .stat-card, .panel, .wallet-item, .empresa-item { transition: border-color .2s ease, background-color .2s ease, transform .2s ease; } .btn, .btn-primary, .btn-neon, .btn-secondary, .btn-outline-primary, .btn-ghost, .btn-ghost-dark, .np-confirm, .np-quick-btn { transition: all .2s ease; } .form-control, .portal-input, .form-select, .np-select, .np-textarea, .np-amount-input { transition: border-color .2s ease, background-color .2s ease; } /* ============================================================= SELECTION COLOR ============================================================= */ ::selection { background: var(--brand-primary-subtle); color: var(--text-primary); } ::-moz-selection { background: rgba(237, 237, 237, 0.15); color: var(--text-primary); } /* ============================================================= SCROLLBAR CUSTOM ============================================================= */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: var(--border-hover); } /* ============================================================= SKELETON LOADER ============================================================= */ @keyframes skeletonShimmer { 0% { background-position: -200px 0; } 100% { background-position: 200px 0; } } .skeleton { background: linear-gradient(90deg, var(--bg-card-alt) 0%, var(--bg-hover) 50%, var(--bg-card-alt) 100%); background-size: 400px 100%; animation: skeletonShimmer 1.5s ease-in-out infinite; border-radius: var(--radius-md); display: block; } .skeleton-line { height: 14px; } .skeleton-line + .skeleton-line { margin-top: 8px; } .skeleton-block { height: 80px; } /* ============================================================= TOOLTIP (ligero, Bootstrap-compatible si se usa data-bs-toggle) ============================================================= */ .tooltip-inline { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-primary); padding: 6px 10px; font-size: 11px; opacity: 0; transition: opacity .15s ease; pointer-events: none; } .tooltip-inline.is-visible { opacity: 1; } /* ============================================================= EMPTY STATES UNIFICADOS Aplica tanto a .empty-state (legacy) como a .es-wrap (nuevo). Icono line 48px color text-ghost, texto text-dim, CTA secondary. ============================================================= */ .empty-state, .es-wrap { text-align: center; padding: 48px 24px; color: var(--text-dim); font-size: 13px; } .empty-state i, .empty-state svg, .es-wrap .es-icon i, .es-wrap .es-icon svg { display: inline-block; font-size: 40px; color: var(--text-ghost); margin-bottom: 16px; stroke-width: 1.5; opacity: 1; } .empty-state > div, .es-wrap > div { color: var(--text-dim); } .empty-state .btn-primary, .es-wrap .btn-primary, .empty-state .btn, .es-wrap .btn-secondary { margin-top: 16px; } /* Si hay CTA en empty state, preferir secondary (no gritar) */ .empty-state .btn-primary { background: transparent; color: var(--text-secondary); border: 1px solid var(--border); box-shadow: none; } .empty-state .btn-primary:hover { background: transparent; border-color: var(--text-ghost); color: var(--text-primary); box-shadow: none; } /* views.css */ /* ============================================================= Portal San Cristobal — View primitives Clases compartidas entre dashboard, saldo, pedidos, trc20, empresas y páginas públicas del portal. ============================================================= */ .page-head { margin-bottom: 20px; display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; } .page-title { margin: 0; font-size: 28px; font-weight: 500; letter-spacing: -0.8px; color: var(--text-primary); } .page-sub { margin-top: 4px; color: var(--text-muted); font-size: 13px; } .page-stack-narrow { max-width: 520px; margin: 0 auto; } .panel { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: 24px 28px; } .panel-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; } .panel-title { margin: 0; font-size: 13px; font-weight: 500; color: var(--text-primary); display: inline-flex; align-items: center; gap: 8px; } .panel-title i { color: var(--text-muted); font-weight: 400; font-size: 13px; } .panel-link { font-size: 12px; color: var(--text-muted); } .panel-link:hover { color: var(--text-primary); text-decoration: underline; } .data-table { width: 100%; margin: 0; border-collapse: collapse; } .data-table th { padding: 10px 12px; text-align: left; font-size: 11px; font-weight: 500; letter-spacing: 0.3px; text-transform: uppercase; color: var(--text-dim); border-bottom: 1px solid var(--border); background: transparent; } .data-table td { padding: 14px 12px; color: var(--text-secondary); font-size: 13px; border-bottom: 1px solid var(--border); background: transparent; } .data-table tr:last-child td { border-bottom: 0; } .data-table tbody tr:hover td { background: var(--bg-hover); } .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } .num-right, .data-table th.num-right, .data-table td.num-right { text-align: right; } .saldo-card { padding: 28px 32px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-xl); display: flex; flex-direction: column; gap: 24px; } .saldo-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; } .saldo-label { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); font-weight: 500; } .saldo-amount { margin-top: 8px; font-family: var(--font-mono); font-size: 42px; font-weight: 500; letter-spacing: -2px; line-height: 1; color: var(--text-primary); font-variant-numeric: tabular-nums; } .saldo-amount.muted { color: var(--text-muted); } .saldo-currency { margin-left: 8px; font-family: var(--font-sans); font-size: 13px; font-weight: 500; letter-spacing: 0; color: var(--text-muted); } .saldo-badges { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 14px; } .saldo-donut { position: relative; width: 72px; height: 72px; flex-shrink: 0; } .saldo-donut svg { transform: rotate(-90deg); } .saldo-donut-track { stroke: var(--border); fill: none; stroke-width: 6; } .saldo-donut-value { stroke: var(--text-primary); fill: none; stroke-width: 6; stroke-linecap: round; stroke-dasharray: 214; stroke-dashoffset: 214; transition: stroke-dashoffset 1.5s cubic-bezier(.4,0,.2,1); } .saldo-donut-pct { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 14px; font-weight: 500; color: var(--text-secondary); font-variant-numeric: tabular-nums; } .saldo-divider { height: 1px; background: var(--border); margin: 4px 0; } .saldo-footer { display: flex; gap: 40px; } .saldo-footer-item { display: flex; flex-direction: column; gap: 4px; } .saldo-footer-label { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); font-weight: 500; } .saldo-footer-label i { color: var(--text-dim); font-size: 10px; } .saldo-footer-value { font-family: var(--font-mono); font-size: 18px; font-weight: 500; color: var(--text-primary); letter-spacing: -0.3px; font-variant-numeric: tabular-nums; } .saldo-footer-value.muted { color: var(--text-muted); } .saldo-footer-sub { font-size: 11px; color: var(--text-dim); } @media (max-width: 767px) { .saldo-head, .saldo-footer { flex-direction: column; gap: 16px; } } /* base.css */ /* ============================================================= Portal San Cristobal — Layout base Extraido desde portal_base.html para mantener el template legible ============================================================= */ /* Aliases de compatibilidad para tokens legacy usados en vistas antiguas o en transición. */ :root { --bg-page: var(--bg-base); --bg-card-elevated: var(--bg-card-alt); --bg-card-hover: var(--bg-hover); --border-subtle: var(--border); --border-default: var(--border); --border-strong: var(--border-hover); --text-tertiary: var(--text-muted); --neutral-zero: var(--text-muted); --indigo: var(--text-primary); --indigo-soft: transparent; --violet: var(--text-primary); --violet-soft: transparent; --sky: var(--text-primary); --sky-soft: transparent; --mint: var(--accent-live); --mint-soft: transparent; --amber: var(--text-muted); --amber-soft: transparent; --pink: var(--text-muted); --pink-soft: transparent; --coral: var(--accent-danger); --coral-soft: transparent; --success: var(--accent-live); --success-soft: transparent; --danger: var(--accent-danger); --danger-soft: transparent; --warning: var(--text-muted); --warning-soft: transparent; --gradient-brand: linear-gradient(135deg, var(--text-primary) 0%, var(--text-secondary) 100%); } * { box-sizing: border-box; } html { scroll-behavior: smooth; background: var(--bg-page); } body { /* margin:0 lo daba el Reboot de Bootstrap; ahora propio para no depender del CDN */ margin: 0; font-family: var(--font-sans); min-height: 100vh; color: var(--text-primary); background: var(--bg-page); overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; letter-spacing: -0.011em; } body::before { content: ""; position: fixed; inset: 0; z-index: -2; background: radial-gradient(ellipse 55% 40% at 18% 20%, var(--violet-soft), transparent 60%), radial-gradient(ellipse 45% 45% at 85% 15%, var(--indigo-soft), transparent 55%); animation: auroraFloat 30s ease-in-out infinite alternate; will-change: transform; } body::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background-image: radial-gradient(circle at 1px 1px, var(--border) 1px, transparent 0); opacity: .35; background-size: 24px 24px; } @keyframes auroraFloat { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-4%, 2%) scale(1.05); } 100% { transform: translate(3%, -2%) scale(1.03); } } @media (prefers-reduced-motion: reduce) { body::before { animation: none; } } .portal-shell { max-width: 1280px; margin: 0 auto; padding: 24px 20px 120px; } .portal-nav { position: sticky; top: 12px; z-index: 100; /* era rgba(10,10,10,.8): una barra NEGRA hardcodeada, rota sobre el papel claro de CLAMP. El token sigue al tema y el blur mantiene el efecto. */ background: color-mix(in srgb, var(--bg-card) 82%, transparent); border: 1px solid var(--border); border-radius: var(--radius-lg); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); padding: 10px 16px; } .portal-brand-group { display: inline-flex; align-items: center; gap: 10px; } .portal-brand { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; font-size: 14px; letter-spacing: -0.01em; color: var(--text-primary); text-decoration: none; } .portal-brand::before { content: ""; width: 22px; height: 22px; border-radius: 6px; background: var(--brand-primary); } .portal-breadcrumb-sep { color: var(--text-ghost); font-size: 14px; user-select: none; } .portal-breadcrumb-crumb { color: var(--text-secondary); font-size: 13px; font-weight: 400; letter-spacing: -0.005em; } .portal-nav-links { display: flex; gap: 2px; flex-wrap: wrap; align-items: center; } .portal-nav-link { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; font-size: 13px; font-weight: 500; color: var(--text-muted); text-decoration: none; border-radius: var(--radius-md); transition: color .18s ease, background-color .18s ease; background: transparent; border: 0; cursor: pointer; } /* hover/activo con token: el rgba blanco era invisible sobre el papel claro (mismo bug que el sidebar) */ .portal-nav-link:hover { color: var(--text-primary); background: var(--bg-hover); text-decoration: none; } .portal-nav-link:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; } .portal-nav-link i { color: inherit; transition: color .18s; font-size: 12px; } .portal-nav-link.active { color: var(--text-primary); background: var(--bg-hover); } .portal-nav-link.active i { color: var(--text-primary); } .portal-nav-link.cta { background: var(--brand-primary); /* el texto sobre el naranja va con su contraste propio, no con el papel */ color: var(--brand-primary-contrast); padding: 8px 14px; } .portal-nav-link.cta i { color: var(--brand-primary-contrast); } .portal-nav-link.cta:hover { color: var(--brand-primary-contrast); background: var(--brand-primary); filter: brightness(0.96); } .display-mega { font-size: clamp(2.8rem, 7vw, 4.5rem); font-weight: 500; letter-spacing: -0.05em; line-height: 0.95; font-variant-numeric: tabular-nums; } .display-giant { font-size: clamp(2rem, 5vw, 3rem); font-weight: 500; letter-spacing: -0.04em; line-height: 1; } .eyebrow { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); font-weight: 500; } .text-gradient { background: var(--gradient-brand); -webkit-background-clip: text; background-clip: text; color: transparent; } .dot-live-wrap { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 6px; height: 6px; } .dot-live { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--accent-live); } .dot-live-wrap::after { content: ""; position: absolute; width: 6px; height: 6px; border-radius: 50%; background: var(--accent-live); animation: pulse-live 2s cubic-bezier(0.4, 0, 0.2, 1) infinite; } @keyframes pulse-live { 0% { transform: scale(1); opacity: 0.3; } 100% { transform: scale(2.5); opacity: 0; } } .portal-table { margin: 0; color: var(--text-secondary); --bs-table-bg: transparent; --bs-table-color: var(--text-secondary); --bs-table-border-color: var(--border-subtle); --bs-table-accent-bg: transparent; --bs-table-hover-bg: var(--bg-hover); --bs-table-hover-color: var(--text-primary); --bs-table-striped-bg: transparent; --bs-table-active-bg: transparent; background-color: transparent !important; } .portal-table > :not(caption) > * > * { background-color: transparent; box-shadow: none; border-bottom-color: var(--border-subtle); } .portal-table thead th { font-size: 11px; letter-spacing: 0.3px; text-transform: uppercase; font-weight: 500; color: var(--text-dim); border-bottom: 1px solid var(--border); padding: 14px 16px; background-color: transparent; } .portal-table tbody td { padding: 18px 16px; border-bottom: 0.5px solid var(--border-subtle); color: var(--text-secondary); background-color: transparent; } .portal-table tbody tr:last-child td { border-bottom: 0; } .portal-table tbody tr { transition: background .15s; background-color: transparent; } .portal-table tbody tr:hover td, .portal-table.table-hover tbody tr:hover > * { background-color: var(--bg-hover) !important; } .portal-flash { border-radius: 14px; border: 0.5px solid transparent; padding: 14px 18px; font-size: .9rem; font-weight: 500; display: flex; align-items: start; gap: 12px; backdrop-filter: blur(10px); } .portal-flash.alert-success { background: var(--mint-soft); color: var(--mint); border-color: rgba(110,231,183,.2); } .portal-flash.alert-danger { background: var(--coral-soft); color: var(--coral); border-color: rgba(248,113,113,.2); } .portal-flash.alert-warning { background: var(--amber-soft); color: var(--amber); border-color: rgba(251,191,36,.2); } .portal-flash.alert-info { background: var(--sky-soft); color: var(--sky); border-color: rgba(56,189,248,.2); } .portal-mono { font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace; word-break: break-all; font-size: 0.84rem; color: var(--text-secondary); } .soft-divider { height: 1px; background: var(--border-subtle); margin: 16px 0; } a { color: var(--text-primary); text-decoration: none; } a:hover { color: var(--text-primary); text-decoration: underline; } .fab-nuevo-pedido { position: fixed; bottom: 28px; right: 28px; z-index: 50; padding: 12px 20px; border-radius: 999px; background: var(--brand-primary); color: var(--bg-base); font-weight: 500; font-size: 13px; border: 0; cursor: pointer; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(0, 0, 0, 0.1) inset; display: inline-flex; align-items: center; gap: 8px; transition: transform .2s ease, box-shadow .2s ease; text-decoration: none; } .fab-nuevo-pedido:hover { transform: translateY(-1px); color: var(--bg-base); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(0, 0, 0, 0.1) inset; } .fab-nuevo-pedido i { font-size: 11px; transition: transform .3s ease; } .fab-nuevo-pedido:hover i { transform: rotate(90deg); } .portal-foot { color: var(--text-tertiary); font-size: .82rem; margin-top: 60px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 3px; } /* "hecha con Clamp": la mesa arriba, la marca de la plataforma acá — discreta pero con "Clamp" destacado (color de marca) y link a clamp.cl. */ .portal-foot .foot-made { opacity: .7; } .portal-foot .foot-clamp { color: var(--brand-primary); font-weight: 700; letter-spacing: .01em; text-decoration: none; transition: opacity .15s; } .portal-foot .foot-clamp:hover { opacity: .8; text-decoration: underline; } .portal-foot .foot-copy { opacity: .5; font-size: .78rem; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 10px; border: 2px solid var(--bg-page); } ::-webkit-scrollbar-thumb:hover { background: var(--border-hover); } @keyframes fadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } .fade-up { animation: fadeUp .5s cubic-bezier(.19,1,.22,1) both; } .fade-up-d1 { animation-delay: .06s; } .fade-up-d2 { animation-delay: .12s; } .fade-up-d3 { animation-delay: .18s; } .fade-up-d4 { animation-delay: .24s; } .fade-up-d5 { animation-delay: .30s; } .btn { font-weight: 500; } .portal-hero { background: radial-gradient(circle at 20% 20%, var(--violet-soft), transparent 60%), var(--bg-card); border: 0.5px solid var(--border-default); border-radius: 22px; color: var(--text-primary); padding: 28px; } /* ============================================================= Admin sidebar layout ============================================================= */ body.admin-layout { display: flex; min-height: 100vh; background: var(--bg-base); overflow-x: hidden; } /* Sidebar */ .admin-sidebar { position: fixed; top: 0; left: 0; height: 100vh; width: 220px; background: var(--bg-card); border-right: 1px solid var(--border); display: flex; flex-direction: column; z-index: 200; overflow-y: auto; transition: transform .25s cubic-bezier(.4,0,.2,1); } .sidebar-header { display: flex; align-items: center; justify-content: space-between; padding: 20px 16px 16px; border-bottom: 1px solid var(--border); flex-shrink: 0; } .sidebar-brand { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; color: var(--text-primary); text-decoration: none; letter-spacing: -0.02em; } .sidebar-brand:hover { color: var(--text-primary); text-decoration: none; } .sidebar-brand-icon { width: 24px; height: 24px; border-radius: 6px; background: var(--brand-primary); flex-shrink: 0; } .sidebar-section-label { padding: 20px 16px 6px; font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dim); flex-shrink: 0; } .sidebar-nav { display: flex; flex-direction: column; gap: 1px; padding: 0 8px; flex-shrink: 0; } .sidebar-link { display: flex; align-items: center; gap: 10px; padding: 8px 10px; font-size: 13px; font-weight: 500; color: var(--text-muted); border-radius: var(--radius-md); text-decoration: none; transition: color .15s, background .15s; position: relative; } .sidebar-link i { font-size: 13px; width: 16px; text-align: center; flex-shrink: 0; color: inherit; transition: color .15s; } .sidebar-link:hover { color: var(--text-primary); background: var(--bg-hover); /* era rgba(255,255,255,.04): invisible sobre el papel claro de CLAMP */ text-decoration: none; } .sidebar-link:focus-visible { /* faltaba foco de teclado (WCAG 2.4.7) */ outline: 2px solid var(--border-focus); outline-offset: 2px; } .sidebar-link.active { color: var(--text-primary); background: var(--bg-hover); /* era rgba(255,255,255,.07) */ } .sidebar-link.active i { color: var(--text-primary); } /* wayfinding del ítem activo: barra de marca a la izquierda (chrome de navegación, no "acción" → el naranja acá es correcto) */ .sidebar-link.active::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; background: var(--brand-primary); } .sidebar-badge { margin-left: auto; background: var(--brand-primary); color: var(--brand-primary-contrast); font-size: 10px; font-weight: 600; border-radius: 99px; padding: 1px 6px; min-width: 18px; text-align: center; } /* Footer / user area */ .sidebar-footer { margin-top: auto; border-top: 1px solid var(--border); padding: 12px 8px; display: flex; align-items: center; gap: 6px; flex-shrink: 0; } .sidebar-user { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; padding: 4px 6px; } .sidebar-user-avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--bg-hover); border: 1px solid var(--border-hover); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; color: var(--text-secondary); flex-shrink: 0; } .sidebar-user-info { min-width: 0; } .sidebar-user-name { font-size: 12px; font-weight: 500; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sidebar-user-role { font-size: 10px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.05em; } .sidebar-link-logout { padding: 8px; flex-shrink: 0; margin-left: auto; } .sidebar-link-logout i { margin: 0; width: auto; } /* Toggle buttons */ .sidebar-toggle-open, .sidebar-toggle-close { background: transparent; border: 0; color: var(--text-muted); font-size: 16px; padding: 6px; cursor: pointer; border-radius: var(--radius-md); transition: color .15s; } .sidebar-toggle-open:hover, .sidebar-toggle-close:hover { color: var(--text-primary); } /* Overlay */ .sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 199; backdrop-filter: blur(2px); } .sidebar-overlay.visible { display: block; } /* Main content area */ .admin-main { margin-left: 220px; flex: 1; min-width: 0; display: flex; flex-direction: column; } .admin-main-full { margin-left: 0; } .admin-content { flex: 1; padding: 32px 32px 80px; max-width: 1200px; width: 100%; } /* Topbar (mobile only) */ .admin-topbar { position: sticky; top: 0; z-index: 100; /* tokenizado: antes rgba(10,10,10,.9) hardcodeado → en el tema claro quedaba negro-sobre-negro con .topbar-title (var(--text-primary)). var(--bg-card) invierte bien en todos los temas. */ background: var(--bg-card); border-bottom: 1px solid var(--border); padding: 12px 16px; display: flex; align-items: center; justify-content: space-between; } .topbar-title { font-size: 14px; font-weight: 600; color: var(--text-primary); letter-spacing: -0.02em; } /* Remove old portal-nav on admin/portal sidebar layout */ body.admin-layout .portal-nav, body.portal-layout .portal-nav { display: none !important; } /* Portal cliente layout — reutiliza clases del admin sidebar */ body.portal-layout { display: flex; min-height: 100vh; background: var(--bg-base); overflow-x: hidden; } /* CTA "Nuevo pedido" dentro del sidebar */ .sidebar-cta-wrap { padding: 12px 8px; flex-shrink: 0; } .sidebar-cta-btn { width: 100%; padding: 9px 14px; border-radius: var(--radius-md); background: var(--brand-primary); color: var(--bg-base); font-size: 13px; font-weight: 600; border: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 7px; transition: filter .15s; letter-spacing: -0.01em; } .sidebar-cta-btn:hover { filter: brightness(.9); } .sidebar-cta-btn i { font-size: 11px; } /* Botón + en topbar mobile */ .topbar-cta-btn { background: var(--brand-primary); color: var(--bg-base); border: 0; border-radius: var(--radius-md); width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; font-size: 14px; cursor: pointer; } /* Mobile: sidebar off-canvas */ @media (max-width: 767px) { .admin-sidebar { transform: translateX(-100%); box-shadow: none; } .admin-sidebar.open { transform: translateX(0); box-shadow: 8px 0 40px rgba(0,0,0,.6); } .admin-main { margin-left: 0; } .admin-content { padding: 20px 16px 60px; } } /* Skip-link (P1.10 del spec de marca). Invisible hasta que recibe foco de teclado; ahí aparece arriba a la izquierda. En una herramienta que se opera con teclado, saltarse el sidebar entero vale más que en una landing. Va fuera de [data-theme] a propósito: la accesibilidad no es de un tema. */ .skip-link { position: absolute; left: 8px; top: -60px; z-index: 1000; padding: 10px 16px; background: var(--text-primary); color: var(--bg-base); font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.22em; text-transform: uppercase; text-decoration: none; transition: top .18s ease; } .skip-link:focus { top: 8px; color: var(--bg-base); } /* overrides.css */ /* ============================================================= Overrides — traduce las clases Bootstrap al dark theme tokenizado ============================================================= */ body { background: var(--bg-base); color: var(--text-secondary); font-family: var(--font-sans); } h1, h2, h3, h4, h5, h6 { color: var(--text-primary); letter-spacing: -0.2px; } /* Cards */ .card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-xl); color: var(--text-secondary); } .card a { color: var(--text-primary); } /* Form controls */ .form-label { color: var(--text-muted); font-size: 12px; font-weight: 500; } .form-control, .form-select { background: var(--bg-card-alt); border: 1px solid var(--border); color: var(--text-primary); border-radius: var(--radius-md); } .form-control:focus, .form-select:focus { background: var(--bg-card-alt); border-color: var(--border-focus); color: var(--text-primary); box-shadow: none; } .form-control::placeholder { color: var(--text-dim); } .form-text { color: var(--text-muted); font-size: 12px; } /* Buttons */ .btn-outline-secondary { color: var(--text-secondary); border-color: var(--border); } .btn-outline-secondary:hover { background: var(--bg-hover); color: var(--text-primary); border-color: var(--border-hover); } /* .btn-outline-light no estaba re-tokenizado → usaba el blanco de Bootstrap y quedaba casi invisible en el tema claro. Espejo de .btn-outline-secondary. */ .btn-outline-light { color: var(--text-secondary); border-color: var(--border); } .btn-outline-light:hover { background: var(--bg-hover); color: var(--text-primary); border-color: var(--border-hover); } /* Tabs estilo "pill" neutro del design system, no usa brand-primary */ .btn-outline-primary { background: transparent; color: var(--text-muted); border: 1px solid var(--border); } .btn-outline-primary:hover { background: var(--bg-hover); color: var(--text-primary); border-color: var(--border-hover); } /* El btn-primary activo de tabs debe verse como "seleccionado" neutro */ .btn-group .btn-primary, .btn-group .btn.btn-primary { background: var(--brand-primary); color: var(--brand-primary-contrast); border: 1px solid var(--brand-primary); } .btn-group .btn-primary:hover { filter: brightness(0.95); color: var(--bg-base); } /* success/danger/warning tokenizados (antes hex de tema oscuro: #50E3C2 teal, #7F1D1D granate — ilegibles sobre el papel claro de CLAMP) */ .btn-outline-success { color: var(--accent-live); border-color: var(--accent-live); } .btn-outline-success:hover { background: var(--accent-live); color: var(--brand-primary-contrast); border-color: var(--accent-live); } .btn-outline-danger { color: var(--accent-danger); border-color: var(--accent-danger); } .btn-outline-danger:hover { background: var(--accent-danger); color: var(--brand-primary-contrast); border-color: var(--accent-danger); } .btn-outline-warning { color: var(--accent-warn); border-color: var(--accent-warn); } .btn-outline-warning:hover { background: var(--accent-warn); color: var(--brand-primary-contrast); border-color: var(--accent-warn); } .btn-success { background: var(--accent-live); color: var(--brand-primary-contrast); border: 0; } .btn-success:hover { background: var(--accent-live); color: var(--brand-primary-contrast); filter: brightness(.94); } .btn-danger { background: var(--accent-danger); color: var(--brand-primary-contrast); border: 0; } .btn-secondary { background: var(--bg-hover); border: 1px solid var(--border); color: var(--text-primary); } .btn-secondary:hover { background: var(--border); color: var(--text-primary); } /* Tables */ .table { color: var(--text-secondary); --bs-table-bg: transparent; --bs-table-color: var(--text-secondary); --bs-table-hover-bg: var(--bg-hover); --bs-table-hover-color: var(--text-primary); --bs-table-striped-bg: var(--bg-card-alt); border-color: var(--border); } .table thead { color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.3px; font-size: 11px; } .table thead th { border-bottom: 1px solid var(--border); font-weight: 500; background: transparent !important; color: var(--text-muted) !important; } .table td, .table th { border-color: var(--border); } /* Alerts */ .alert { /* padding/margin los daba Bootstrap; ahora propios (base.html ya no lo carga) */ padding: 0.75rem 1rem; margin-bottom: 1rem; border-radius: var(--radius-md); border: 1px solid var(--border); } /* alerts tokenizados: el texto pastel de tema oscuro (#a7f3d0/#fca5a5/#fcd34d/ #93c5fd) daba 1.3–1.9:1 sobre los tints casi blancos → ilegible en login/portal */ .alert-success { background: rgba(77,107,63,.10); border-color: rgba(77,107,63,.30); color: var(--accent-live); } .alert-danger { background: rgba(197,57,41,.10); border-color: rgba(197,57,41,.30); color: var(--accent-danger); } .alert-warning { background: rgba(140,107,47,.12); border-color: rgba(140,107,47,.30); color: var(--accent-warn); } .alert-info { background: rgba(24,95,165,.10); border-color: rgba(24,95,165,.30); color: var(--accent-info); } /* Badges */ .badge.bg-light { background: var(--bg-card-alt) !important; color: var(--text-secondary) !important; } .badge.bg-secondary { background: var(--bg-hover) !important; color: var(--text-secondary) !important; } .badge.bg-success { background: var(--accent-live) !important; color: var(--bg-base) !important; } .badge.bg-warning { background: var(--accent-warn) !important; color: var(--bg-base) !important; } /* bg-info/bg-danger usaban los colores fijos de Bootstrap (rompían el tema). Tokenizados: accent como fondo + var(--bg-base) como texto invierte bien por tema (igual que .sidebar-cta-btn). */ .badge.bg-info { background: var(--accent-info) !important; color: var(--bg-base) !important; } .badge.bg-danger { background: var(--accent-danger) !important; color: var(--bg-base) !important; } /* Modals */ .modal-content { background: var(--bg-card); color: var(--text-primary); border: 1px solid var(--border); border-radius: var(--radius-xl); } .modal-header { border-bottom: 1px solid var(--border); } .modal-footer { border-top: 1px solid var(--border); } /* La X nativa de Bootstrap es oscura. El invert la pinta blanca — bien en temas oscuros, pero INVISIBLE sobre la card blanca de CLAMP. Gatear el invert solo a los temas oscuros; en los claros la X oscura nativa se ve. */ [data-theme="bloomberg"] .btn-close, [data-theme="grafito"] .btn-close, [data-theme="crt"] .btn-close, [data-theme="glass"] .btn-close { filter: invert(1) grayscale(1) brightness(2); } /* Code */ code { background: var(--bg-card-alt); color: var(--text-primary); padding: 2px 6px; border-radius: var(--radius-sm); font-family: var(--font-mono); font-size: 12px; } hr { border-color: var(--border); opacity: 1; } .text-muted { color: var(--text-muted) !important; } .vr { background-color: var(--border); opacity: 1; } /* Page head */ .page-head { margin: 8px 0 20px; } .page-head h1 { margin: 0; color: var(--text-primary); } .page-head .sub { color: var(--text-muted); font-size: 13px; margin-top: 4px; } /* Empty state */ .empty-state { text-align: center; color: var(--text-muted); padding: 40px 20px; } .empty-state i { font-size: 24px; margin-bottom: 8px; display: block; color: var(--text-dim); } /* Fade ins */ .fade-up { animation: fadeUp .25s ease-out both; } @keyframes fadeUp { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } } /* mobile.css */ /* ============================================================= Mobile responsive — mejoras para <768px Cargar AL FINAL para sobrescribir estilos previos. ============================================================= */ /* Nav: hamburguesa en mobile */ @media (max-width: 767.98px) { .portal-shell { padding-left: 14px; padding-right: 14px; } .portal-nav { position: sticky; top: 0; z-index: 100; background: var(--bg-card); border-bottom: 1px solid var(--border); padding: 10px 14px; margin: -14px -14px 18px; } .portal-nav-links { display: none; flex-direction: column; width: 100%; gap: 2px; padding-top: 12px; border-top: 1px solid var(--border); margin-top: 12px; } .portal-nav.mobile-open .portal-nav-links { display: flex; } .portal-nav-link { padding: 10px 12px; border-radius: var(--radius-md); font-size: 15px; } .portal-nav-link.active { background: rgba(255,255,255,0.06); } /* Botón hamburguesa */ .nav-toggle { display: inline-flex !important; background: transparent; border: 1px solid var(--border); color: var(--text-primary); padding: 8px 12px; border-radius: var(--radius-md); cursor: pointer; align-items: center; justify-content: center; font-size: 16px; } /* Page title más pequeño en mobile */ .page-title { font-size: 24px !important; } .page-head { flex-direction: column; align-items: flex-start !important; gap: 12px; } /* Stat cards: 2 columnas en mobile */ .stat-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; } .stat-card-value { font-size: 24px !important; } .stat-card { padding: 14px 16px !important; } /* Tablas: scroll horizontal limpio */ .table-responsive-mobile { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -14px; padding: 0 14px; } .data-table, .table { font-size: 13px; } .data-table th, .data-table td, .table th, .table td { padding: 10px 8px !important; white-space: nowrap; } /* Card containers full width */ .card, .panel { border-radius: var(--radius-md); } /* Forms full width, inputs bigger */ .form-control, .form-select { font-size: 16px !important; /* evita zoom en iOS */ padding: 10px 12px; } /* FAB (Floating Action Button) "Nuevo pedido" */ .fab-nuevo-pedido { position: fixed; bottom: 20px; right: 20px; width: auto !important; z-index: 90; box-shadow: 0 4px 12px rgba(0,0,0,0.3); } /* Footer */ .portal-foot { flex-wrap: wrap; text-align: center; font-size: 11px; justify-content: center; } /* Dashboard bento grid: single column */ .bento-grid, .dashboard-grid { grid-template-columns: 1fr !important; } /* Modals: full screen en mobile */ .modal-dialog { margin: 0 !important; max-width: 100% !important; height: 100%; } .modal-content { height: 100%; border-radius: 0 !important; } /* Login / register / verify: padding menor en mobile */ .page-stack-narrow { padding: 16px 0; } /* Botones en formularios */ .btn, .btn-primary, .btn-secondary { min-height: 44px; /* Apple HIG minimum touch target */ } } /* Botón hamburguesa oculto por defecto en desktop */ .nav-toggle { display: none; } /* Chart canvas responsive */ @media (max-width: 991.98px) { .chart-card canvas { max-height: 240px !important; } } /* Tablas: si no tienen wrapper responsive, envolverlas visualmente */ @media (max-width: 767.98px) { .panel > table, .card > table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; } } /* ============================================================= Cockpit P2P (dashboard operativo) — usable en 390px (P0-C) El flujo completo ver → liberar → chat → AML con el pulgar. ============================================================= */ /* Botón "volver a la lista" del detalle: solo existe en móvil */ .det-back { display: none; } @media (max-width: 767.98px) { /* --- Sin scroll horizontal: se arreglan las causas y se blinda el resto --- */ .admin-content { padding-left: 12px; padding-right: 12px; overflow-x: hidden; } body .admin-content h1 { font-size: 24px !important; } /* especificidad extra: bloomberg.css carga después */ /* el // TITLE gigante no entra en 390 */ /* KPIs: 2 columnas que pueden encogerse (minmax(0) mata el min-content) */ .stat-bar { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } .stat { padding: 11px 12px !important; min-width: 0; } .stat-value { font-size: 19px !important; overflow-wrap: anywhere; } .stat-label { font-size: 9px; } /* Filtros: 2 por fila + buscador a lo ancho; 16px evita el zoom de iOS */ .panel-toolbar { flex-wrap: wrap !important; } .panel-toolbar .form-select { flex: 1 1 45% !important; min-width: 0; font-size: 16px !important; } .panel-toolbar .form-control { flex: 1 1 100% !important; font-size: 16px !important; } /* Lista de órdenes: más corta para que se intuya el detalle abajo */ .orders-scroll { max-height: 46vh !important; } .ocard, .ocard-row, .ocard-meta, .ocard-who { min-width: 0; } .ocard-amt { font-size: 19px; } .ocard-nums { white-space: normal !important; text-align: right; font-size: 11px !important; } .ocard .text-truncate { max-width: 120px; } /* Detalle: al tocar una orden el JS lo trae a la vista (scroll-margin deja aire para el topbar sticky) */ #order-detail { scroll-margin-top: 60px; } .det { padding: 12px 12px 16px !important; } .det-back { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; background: transparent; border: 1px solid var(--border); color: var(--text-muted); font-family: var(--font-mono); font-size: 11px; padding: 8px 11px; border-radius: var(--radius-md); min-height: 40px; } .det-head { flex-wrap: wrap; gap: 8px; } /* Hero: monto arriba, acción abajo a lo ancho — el botón de liberar es LA acción del flujo: grande y para el pulgar */ .det-hero { flex-direction: column !important; align-items: stretch !important; } .det-hero-r { text-align: left !important; width: 100%; } .det-rel-form { width: 100%; } .det-rel-btn { width: 100%; min-height: 52px; font-size: 15px !important; display: inline-flex; align-items: center; justify-content: center; gap: 8px; } /* Pestañas y grillas del detalle */ .det-tab { padding: 12px 14px !important; font-size: 12px !important; } .det-grid { grid-template-columns: max-content minmax(0, 1fr) !important; } .det-grid > * { overflow-wrap: anywhere; } .conc-grid { grid-template-columns: max-content minmax(0, 1fr) !important; } .conc-grid > * { overflow-wrap: anywhere; } /* Chat operable: input sin zoom iOS, botones 44px+ */ .det-chat-msgs { max-height: 44vh !important; } .chat-input { font-size: 16px !important; min-height: 44px !important; } .chat-send-btn { min-width: 46px !important; min-height: 44px !important; } .chat-paste-prev { flex-wrap: wrap; } } @media (max-width: 767.98px) { /* Header del cockpit: título y botón de cartola apilables */ .admin-content > .d-flex.justify-content-between { flex-wrap: wrap; gap: 10px; } } /* ============================================================= Páginas operativas fuera del cockpit (P0-C fase 2): AML · Ganancias · Facturación · Cartola · Mesas ============================================================= */ @media (max-width: 767.98px) { /* Los grids de página no pueden heredar el min-content de sus tablas (ensanchan TODO el panel y desbordan el viewport) */ .grid2 { grid-template-columns: minmax(0, 1fr) !important; } .grid2 > * { min-width: 0; } /* Tablas del backoffice: scroll horizontal propio, sin empujar la página */ .admin-content .tbl { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; } .admin-content .tbl th, .admin-content .tbl td { white-space: nowrap; } /* Táctil global del backoffice: inputs 16px (evita el zoom de iOS al enfocar) y controles con alto mínimo para el pulgar */ .admin-content input:not([type=checkbox]):not([type=radio]):not([type=file]), .admin-content select, .admin-content textarea { font-size: 16px !important; min-height: 44px; } .admin-content .abtn, .admin-content .btn, .admin-content button[type=submit] { min-height: 44px; } }