/* ========================================================= THEME — DESIGN TOKENS CENTRALIZADOS -------------------------------------------------------- Sistema único de variables CSS que controla TODO el sitio: superficies, textos, marca, estados semánticos, bordes, sombras, radios y botones (con todos sus estados). Cómo funciona: - Los tokens en :root son la base (modo claro por defecto). - .white-vertion los reafirma (por seguridad sobre cualquier orden de carga) y .dark-vertion los reescribe a su versión oscura. El toggle del header alterna estas clases sobre . - Las páginas y componentes consumen los tokens vía var(--token). Nunca colores hardcodeados. Cómo extender: - Para añadir un nuevo color/marca, agrégalo aquí en :root y dale su variante en .dark-vertion. Listo. - Cualquier componente nuevo debe consumir tokens, no escribir hex literales. ========================================================= */ :root, .white-vertion { /* ---------- MARCA (teal) ---------- */ --brand-50: #ecfdf7; --brand-100: #d8f5ee; --brand-200: #a7ebd8; --brand-300: #6ddabd; --brand-400: #34c8a3; --brand-500: #0bceaf; /* color principal */ --brand-600: #099d89; --brand-700: #077061; --brand-800: #04473d; --brand-900: #022a24; /* ---------- ESTADOS SEMÁNTICOS ---------- */ --color-success: #16a34a; --color-success-hover: #15803d; --color-success-soft: #dcfce7; --color-success-text: #14532d; --color-danger: #ef4444; --color-danger-hover: #dc2626; --color-danger-soft: #fee2e2; --color-danger-text: #7f1d1d; --color-warning: #f59e0b; --color-warning-hover: #d97706; --color-warning-soft: #fefce8; --color-warning-text: #713f12; --color-warning-border: #fde68a; --color-info: #3b82f6; --color-info-hover: #1d4ed8; --color-info-soft: #dbeafe; --color-info-text: #1e3a8a; /* ---------- ACENTOS DECORATIVOS ---------- */ --accent-purple: #8b5cf6; --accent-pink: #ec4899; --accent-orange: #f97316; --accent-coral: #fb9292; /* ---------- SUPERFICIES (fondos) ---------- */ --bg-page: #f5f8fb; /* fondo de la página */ --bg-elevated: #ffffff; /* tarjetas / cards */ --bg-elevated-2: #f8fafc; /* tarjeta dentro de tarjeta, callout neutral */ --bg-muted: #f1f5f9; /* hover suave, chip neutral */ --bg-overlay: rgba(15, 23, 42, 0.6); /* modales backdrop */ /* Soft tints para badges/chips de marca */ --bg-brand-soft: rgba(11, 206, 175, 0.12); --bg-brand-softer:rgba(11, 206, 175, 0.06); /* ---------- TEXTO ---------- */ --text-primary: #1a2536; /* títulos, énfasis */ --text-secondary: #4a5568; /* cuerpo */ --text-muted: #6b7785; /* meta, captions */ --text-disabled: #b0b8c1; --text-inverse: #ffffff; /* texto sobre fondos oscuros / brand */ --text-brand: #0bceaf; --text-brand-strong: #0a9b85; /* sobre tints suaves de marca */ /* ---------- BORDES ---------- */ --border-subtle: rgba(13, 33, 54, 0.06); --border-default: rgba(13, 33, 54, 0.10); --border-strong: rgba(13, 33, 54, 0.18); --border-brand: rgba(11, 206, 175, 0.40); /* ---------- SOMBRAS ---------- */ --shadow-xs: 0 1px 2px rgba(13, 33, 54, 0.04); --shadow-sm: 0 2px 8px rgba(13, 33, 54, 0.06); --shadow-md: 0 8px 24px rgba(13, 33, 54, 0.10); --shadow-lg: 0 20px 50px rgba(13, 33, 54, 0.18); --shadow-xl: 0 30px 80px rgba(13, 33, 54, 0.45); --shadow-brand: 0 8px 22px rgba(11, 206, 175, 0.35); /* ---------- RADIOS ---------- */ --radius-xs: 6px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 20px; --radius-pill: 999px; /* ---------- TRANSICIONES ---------- */ --t-fast: 0.15s ease; --t-base: 0.25s ease; --t-slow: 0.4s ease; /* ===================================================== BOTONES — todos los estados ===================================================== */ /* Primario (teal, acción principal) */ --btn-primary-bg: var(--brand-500); --btn-primary-bg-hover: var(--brand-600); --btn-primary-bg-active: var(--brand-700); --btn-primary-bg-disabled: rgba(11, 206, 175, 0.45); --btn-primary-text: #ffffff; --btn-primary-text-disabled:#ffffff; --btn-primary-border: transparent; --btn-primary-shadow: var(--shadow-brand); /* Secundario (outline mint) */ --btn-secondary-bg: var(--bg-brand-softer); --btn-secondary-bg-hover: var(--bg-brand-soft); --btn-secondary-bg-active: rgba(11, 206, 175, 0.18); --btn-secondary-bg-disabled:transparent; --btn-secondary-text: var(--brand-500); --btn-secondary-text-hover: var(--brand-600); --btn-secondary-text-disabled: var(--text-disabled); --btn-secondary-border: var(--border-brand); --btn-secondary-border-hover: var(--brand-500); /* Ghost (sin fondo, neutro) */ --btn-ghost-bg: transparent; --btn-ghost-bg-hover: var(--bg-muted); --btn-ghost-bg-active: rgba(13, 33, 54, 0.10); --btn-ghost-text: var(--text-secondary); --btn-ghost-text-hover: var(--text-primary); --btn-ghost-border: transparent; /* Comprar (verde success) */ --btn-buy-bg: var(--color-success); --btn-buy-bg-hover: var(--color-success-hover); --btn-buy-bg-active: #166534; --btn-buy-bg-disabled: rgba(22, 163, 74, 0.45); --btn-buy-text: #ffffff; --btn-buy-shadow: 0 6px 18px rgba(22, 163, 74, 0.35); /* Dark / inverse (negro tipo GitHub) */ --btn-dark-bg: #1a2536; --btn-dark-bg-hover: #0f172a; --btn-dark-text: #ffffff; /* ===================================================== FORMULARIOS — inputs, selects, textareas ===================================================== */ --input-bg: var(--bg-elevated); --input-bg-hover: var(--bg-elevated); --input-bg-disabled: var(--bg-muted); --input-text: var(--text-primary); --input-placeholder: var(--text-disabled); --input-border: var(--border-default); --input-border-hover: var(--border-strong); --input-border-focus: var(--brand-500); --input-shadow-focus: 0 0 0 3px rgba(11, 206, 175, 0.18); /* ===================================================== HEADER / NAVEGACIÓN ===================================================== */ --nav-bg: rgba(255, 255, 255, 0.85); --nav-bg-scroll: rgba(255, 255, 255, 0.95); --nav-border: var(--border-subtle); --nav-text: var(--text-secondary); --nav-text-hover: var(--text-primary); --nav-text-active: var(--text-brand); --nav-shadow: var(--shadow-sm); /* ===================================================== LINKS — color y subrayado por defecto ===================================================== */ --link-color: var(--text-brand); --link-color-hover: var(--brand-600); /* ===================================================== CÓDIGO INLINE ===================================================== */ --code-bg: var(--bg-muted); --code-text: var(--text-brand-strong); } /* ========================================================= MODO OSCURO — todos los tokens reescritos ========================================================= */ .dark-vertion { /* Marca: la mantenemos pero suavizamos contrastes con tints */ --brand-50: rgba(11, 206, 175, 0.06); --brand-100: rgba(11, 206, 175, 0.12); /* Superficies oscuras */ --bg-page: #0f172a; --bg-elevated: #1e293b; --bg-elevated-2: #243044; --bg-muted: rgba(255, 255, 255, 0.06); --bg-overlay: rgba(0, 0, 0, 0.7); --bg-brand-soft: rgba(11, 206, 175, 0.18); --bg-brand-softer:rgba(11, 206, 175, 0.10); /* Texto invertido */ --text-primary: #f1f5f9; --text-secondary: #cbd5e1; --text-muted: #94a3b8; --text-disabled: #475569; --text-inverse: #0f172a; --text-brand-strong: #6ddabd; /* más claro sobre fondo oscuro */ /* Bordes */ --border-subtle: rgba(255, 255, 255, 0.06); --border-default: rgba(255, 255, 255, 0.10); --border-strong: rgba(255, 255, 255, 0.18); --border-brand: rgba(11, 206, 175, 0.50); /* Sombras más profundas */ --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.30); --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.30); --shadow-md: 0 10px 28px rgba(0, 0, 0, 0.40); --shadow-lg: 0 22px 55px rgba(0, 0, 0, 0.55); --shadow-xl: 0 30px 80px rgba(0, 0, 0, 0.65); /* Estados semánticos: tints más visibles sobre fondo oscuro */ --color-success-soft: rgba(22, 163, 74, 0.18); --color-danger-soft: rgba(239, 68, 68, 0.18); --color-warning-soft: rgba(245, 158, 11, 0.14); --color-warning-border: rgba(245, 158, 11, 0.40); --color-warning-text: #fde68a; --color-info-soft: rgba(59, 130, 246, 0.18); /* Botones — los primarios mantienen su acento; los neutros se adaptan */ --btn-secondary-bg: rgba(11, 206, 175, 0.10); --btn-secondary-bg-hover: rgba(11, 206, 175, 0.18); --btn-secondary-text: #6ddabd; --btn-secondary-text-hover: #34c8a3; --btn-ghost-bg-hover: rgba(255, 255, 255, 0.06); --btn-ghost-bg-active: rgba(255, 255, 255, 0.10); --btn-dark-bg: #f1f5f9; --btn-dark-bg-hover: #ffffff; --btn-dark-text: #0f172a; /* Formularios: ajuste para fondo oscuro */ --input-bg: rgba(255, 255, 255, 0.04); --input-bg-hover: rgba(255, 255, 255, 0.06); --input-bg-disabled: rgba(255, 255, 255, 0.02); --input-text: var(--text-primary); --input-placeholder: var(--text-disabled); --input-border: rgba(255, 255, 255, 0.10); --input-border-hover: rgba(255, 255, 255, 0.18); --input-border-focus: var(--brand-500); --input-shadow-focus: 0 0 0 3px rgba(11, 206, 175, 0.30); /* Navegación oscura */ --nav-bg: rgba(15, 23, 42, 0.85); --nav-bg-scroll: rgba(15, 23, 42, 0.95); --nav-border: rgba(255, 255, 255, 0.06); /* Links */ --link-color-hover: var(--brand-400); /* Código */ --code-bg: rgba(255, 255, 255, 0.06); --code-text: var(--brand-400); } /* ========================================================= APLICACIÓN GLOBAL ========================================================= */ /* El body sigue tu tipografía / layout existente; aquí solo garantizamos que el fondo y el color de texto vengan de los tokens, sin importar qué páginas no usen variables. */ body.white-vertion, body.dark-vertion { background-color: var(--bg-page); color: var(--text-secondary); transition: background-color var(--t-base), color var(--t-base); } /* color-scheme — informa al navegador qué esquema usar para renderizar controles nativos ( — evita que la lista despegable salga con los colores del SO en vez de los del tema. */ body.white-vertion select option, body.dark-vertion select option { background-color: var(--bg-elevated); color: var(--text-primary); } /* ========================================================= UTILIDADES — botones reutilizables -------------------------------------------------------- Clases globales que cualquier página puede usar sin reinventar estilos. Todas leen de los tokens. ========================================================= */ .btn-token { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 20px; border-radius: var(--radius-sm); border: 1.5px solid transparent; font-size: 14px; font-weight: 600; line-height: 1.2; text-decoration: none; cursor: pointer; font-family: inherit; transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast); } .btn-token:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 2px; } .btn-token[disabled], .btn-token.is-disabled { cursor: not-allowed; transform: none !important; box-shadow: none !important; } /* Primario */ .btn-token--primary { background: var(--btn-primary-bg); color: var(--btn-primary-text); border-color: var(--btn-primary-border); box-shadow: var(--btn-primary-shadow); } .btn-token--primary:hover { background: var(--btn-primary-bg-hover); color: var(--btn-primary-text); transform: translateY(-1px); } .btn-token--primary:active { background: var(--btn-primary-bg-active); transform: translateY(0); } .btn-token--primary[disabled], .btn-token--primary.is-disabled { background: var(--btn-primary-bg-disabled); box-shadow: none; } /* Secundario (outline) */ .btn-token--secondary { background: var(--btn-secondary-bg); color: var(--btn-secondary-text); border-color: var(--btn-secondary-border); } .btn-token--secondary:hover { background: var(--btn-secondary-bg-hover); color: var(--btn-secondary-text-hover); border-color: var(--btn-secondary-border-hover); } .btn-token--secondary:active { background: var(--btn-secondary-bg-active); } .btn-token--secondary[disabled], .btn-token--secondary.is-disabled { background: var(--btn-secondary-bg-disabled); color: var(--btn-secondary-text-disabled); border-color: var(--border-subtle); } /* Ghost */ .btn-token--ghost { background: var(--btn-ghost-bg); color: var(--btn-ghost-text); border-color: var(--btn-ghost-border); } .btn-token--ghost:hover { background: var(--btn-ghost-bg-hover); color: var(--btn-ghost-text-hover); } .btn-token--ghost:active { background: var(--btn-ghost-bg-active); } /* Comprar (verde) */ .btn-token--buy { background: var(--btn-buy-bg); color: var(--btn-buy-text); box-shadow: var(--btn-buy-shadow); } .btn-token--buy:hover { background: var(--btn-buy-bg-hover); transform: translateY(-2px); } .btn-token--buy:active { background: var(--btn-buy-bg-active); transform: translateY(0); } .btn-token--buy[disabled], .btn-token--buy.is-disabled { background: var(--btn-buy-bg-disabled); box-shadow: none; } /* Dark / inverse */ .btn-token--dark { background: var(--btn-dark-bg); color: var(--btn-dark-text); } .btn-token--dark:hover { background: var(--btn-dark-bg-hover); transform: translateY(-1px); } /* Variantes de tamaño */ .btn-token--sm { padding: 8px 14px; font-size: 13px; } .btn-token--lg { padding: 14px 26px; font-size: 15px; } .btn-token--pill { border-radius: var(--radius-pill); } .btn-token--block { width: 100%; } /* ========================================================= PUENTE A CLASES LEGACY -------------------------------------------------------- styles.css histórico usa nombres como .black-bg, .dark-bg, .shadow-1. Aquí los hacemos token-aware para que respondan automáticamente al toggle de tema sin tocar styles.css. ========================================================= */ /* Fondo del body — siempre desde tokens, sin importar la combinación de .white-vertion / .dark-vertion / .black-bg */ body.white-vertion, body.dark-vertion, body.white-vertion.black-bg, body.dark-vertion.black-bg { background-color: var(--bg-page) !important; color: var(--text-secondary); } /* Tarjetas / contenedores con fondo legacy */ .white-vertion .dark-bg, .dark-vertion .dark-bg { background-color: var(--bg-elevated); color: var(--text-secondary); } /* Sombra estándar legacy → token */ .shadow-1 { box-shadow: var(--shadow-sm); } /* ========================================================= FORMULARIOS GLOBALES -------------------------------------------------------- Cualquier ,