/* ══════════════════════════════════════════════════════════════ OfiNet Music — Tema compartido Tokens de diseño + componentes base. Cada página agrega su propio CSS de layout encima de este archivo. Tema oscuro por defecto (escenario); claro con . ══════════════════════════════════════════════════════════════ */ /* Tres paletas a elección del usuario (, se recuerda en este navegador; ver js/ui.js). Cada una tiene versión oscura y clara. Los tokens --stage-* son siempre oscuros: los usan los paneles de diagramas y visualizaciones, que se dibujan sobre fondo oscuro también en el tema claro. */ :root { /* ── Grafito (predeterminada) · oscuro ── */ --bg: #121212; --surface: #1a1a1a; --surface2: #232323; --surface3: #2d2d2d; --border: #2e2e2e; --border-strong: #424242; --text: #f2f0eb; --text2: #aba79e; --text3: #7f7b72; --accent: #ece8df; /* marfil — acciones principales */ --accent-hover: #ffffff; --accent-soft: rgba(236,232,223,.10); --accent-line: rgba(236,232,223,.35); --accent2: #e6dfcf; /* texto de acento */ --on-accent: #151515; --stage-bg: #151515; --stage-surface: #1a1a1a; --stage-surface2: #232323; --stage-surface3: #2d2d2d; --stage-border: #333333; --stage-text: #f2f0eb; --stage-text2: #aba79e; --stage-text3: #7f7b72; --stage-accent: #ece8df; --stage-accent2: #e6dfcf; /* Música */ --chord-color: #fbbf24; /* ámbar — acordes legibles en escenario */ --chord-hover: #fde68a; /* Estados */ --green: #22c55e; --yellow: #facc15; --red: #f87171; --red-soft: rgba(248,113,113,.14); --pink: #f472b6; --orange: #fb923c; /* Tipografía */ --font-ui: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --font-mono: 'JetBrains Mono', 'Cascadia Mono', 'Consolas', 'Courier New', monospace; /* Forma y ritmo */ --radius-sm: 6px; --radius: 10px; --radius-lg: 14px; --shadow: 0 8px 24px rgba(0,0,0,.35); --shadow-lg: 0 20px 50px rgba(0,0,0,.55); --ease: cubic-bezier(.4,0,.2,1); --header-h: 56px; color-scheme: dark; } :root[data-theme="light"] { /* ── Grafito · claro ── */ --bg: #f5f4f1; --surface: #ffffff; --surface2: #eeece8; --surface3: #e3e0da; --border: #e0ddd6; --border-strong: #c9c5bc; --text: #1a1917; --text2: #55524b; --text3: #726e66; --accent: #1f1e1c; --accent-hover: #000000; --accent-soft: rgba(31,30,28,.07); --accent-line: rgba(31,30,28,.35); --accent2: #1f1e1c; --on-accent: #ffffff; --chord-color: #b45309; --chord-hover: #92400e; --green: #15803d; --yellow: #b7791f; --red: #dc2626; --red-soft: rgba(220,38,38,.10); --orange: #c2410c; --pink: #be185d; --shadow: 0 6px 18px rgba(20,20,20,.08); --shadow-lg: 0 20px 50px rgba(20,20,20,.18); color-scheme: light; } /* ── Borgoña ── */ :root[data-palette="borgona"] { --bg: #131011; --surface: #1b1718; --surface2: #241f20; --surface3: #2f2829; --border: #322a2b; --border-strong: #463b3c; --text: #f3eeec; --text2: #b1a6a4; --text3: #877b79; --accent: #9b2d40; --accent-hover: #842536; --accent-soft: rgba(190,80,100,.16); --accent-line: rgba(190,80,100,.45); --accent2: #e59aa8; --on-accent: #fbf1ee; --stage-bg: #161213; --stage-surface: #1b1718; --stage-surface2: #241f20; --stage-surface3: #2f2829; --stage-border: #3a3031; --stage-text: #f3eeec; --stage-text2: #b1a6a4; --stage-text3: #877b79; --stage-accent: #c0475c; --stage-accent2: #e59aa8; } :root[data-palette="borgona"][data-theme="light"] { --bg: #f7f3f2; --surface: #ffffff; --surface2: #f1ebea; --surface3: #e7dfdd; --border: #e5dcda; --border-strong: #cfc3c1; --text: #1d1718; --text2: #5b4f50; --text3: #776a6b; --accent: #8e2438; --accent-hover: #761d2e; --accent-soft: rgba(142,36,56,.09); --accent-line: rgba(142,36,56,.40); --accent2: #8e2438; --on-accent: #ffffff; } /* ── Verde salvia ── */ :root[data-palette="salvia"] { --bg: #0f1312; --surface: #161c1a; --surface2: #1e2624; --surface3: #27312e; --border: #29332f; --border-strong: #3a4743; --text: #eef2f0; --text2: #a2afaa; --text3: #77857f; --accent: #2e8466; --accent-hover: #256e55; --accent-soft: rgba(62,160,125,.16); --accent-line: rgba(62,160,125,.45); --accent2: #8fd3b8; --on-accent: #ffffff; --stage-bg: #121716; --stage-surface: #161c1a; --stage-surface2: #1e2624; --stage-surface3: #27312e; --stage-border: #2f3b37; --stage-text: #eef2f0; --stage-text2: #a2afaa; --stage-text3: #77857f; --stage-accent: #3ea07d; --stage-accent2: #8fd3b8; } :root[data-palette="salvia"][data-theme="light"] { --bg: #f3f6f4; --surface: #ffffff; --surface2: #e9efec; --surface3: #dde6e2; --border: #d9e2de; --border-strong: #bfccc7; --text: #151b19; --text2: #4a5753; --text3: #66736e; --accent: #25705a; --accent-hover: #1c5a48; --accent-soft: rgba(37,112,90,.10); --accent-line: rgba(37,112,90,.40); --accent2: #1f6650; --on-accent: #ffffff; } /* ── Reset y base ─────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0 } html { -webkit-text-size-adjust: 100% } body { font-family: var(--font-ui); font-size: 15px; line-height: 1.5; background: var(--bg); color: var(--text); min-height: 100vh; overflow-x: hidden; -webkit-font-smoothing: antialiased; } button, input, select, textarea { font: inherit; color: inherit } button { cursor: pointer } [hidden] { display: none !important } :focus { outline: none } :focus-visible { outline: 2px solid var(--accent2); outline-offset: 2px; border-radius: var(--radius-sm) } /* Scrollbars discretas */ * { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent } *::-webkit-scrollbar { width: 8px; height: 8px } *::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box } *::-webkit-scrollbar-track { background: transparent } /* ── Iconos SVG (ver js/ui.js) ────────────────────────────────── */ .ico { width: 1.1em; height: 1.1em; flex-shrink: 0; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: -.18em; } .ico.filled { fill: currentColor } /* ── Header de aplicación ─────────────────────────────────────── */ .app-header { height: var(--header-h); display: flex; align-items: center; gap: .75rem; padding: 0 1rem; background: color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter: saturate(160%) blur(10px); -webkit-backdrop-filter: saturate(160%) blur(10px); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 200; } .brand { display: flex; align-items: center; gap: .6rem; min-width: 0 } .brand-mark { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; flex-shrink: 0; background: var(--accent); color: var(--on-accent); } .brand-mark .ico { width: 18px; height: 18px } .brand-text { display: flex; flex-direction: column; line-height: 1.15; min-width: 0 } .brand-name { font-size: .7rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text3) } .brand-page { font-size: 1rem; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis } .header-spacer { flex: 1 } .header-actions { display: flex; align-items: center; gap: .4rem } /* ── Botones ──────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; min-height: 40px; padding: .5rem 1rem; border-radius: var(--radius-sm); border: 1px solid transparent; font-size: .875rem; font-weight: 600; white-space: nowrap; transition: background-color .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease), transform .1s var(--ease); } .btn:active { transform: translateY(1px) } .btn:disabled { opacity: .45; cursor: not-allowed; transform: none } .btn-primary { background: var(--accent); color: var(--on-accent) } .btn-primary:hover:not(:disabled) { background: var(--accent-hover) } .btn-ghost { background: transparent; color: var(--text2); border-color: var(--border) } .btn-ghost:hover:not(:disabled) { background: var(--surface2); color: var(--text) } .btn-danger { background: transparent; color: var(--red); border-color: var(--border) } .btn-danger:hover:not(:disabled) { background: var(--red-soft); border-color: var(--red) } .icon-btn { width: 40px; height: 40px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); background: transparent; border: 1px solid var(--border); color: var(--text2); transition: background-color .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease); } .icon-btn:hover { background: var(--surface2); color: var(--text) } .icon-btn .ico { width: 19px; height: 19px } /* Mostrar el icono correcto del botón de tema */ .theme-toggle .ico-sun { display: none } :root[data-theme="light"] .theme-toggle .ico-sun { display: inline } :root[data-theme="light"] .theme-toggle .ico-moon { display: none } /* Botón «Apariencia» (tema + paleta), ver js/ui.js */ .appearance { position: relative } .appearance-pop { position: absolute; right: 0; top: calc(100% + 6px); z-index: 900; width: 230px; display: flex; flex-direction: column; gap: .45rem; padding: .7rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); } .appearance-pop[hidden] { display: none } .ap-label { font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text3) } .ap-label:not(:first-child) { margin-top: .3rem } .ap-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; padding: 3px; background: var(--surface2); border-radius: var(--radius-sm) } .ap-seg button { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-height: 34px; border: none; border-radius: 4px; background: transparent; color: var(--text2); font-size: .82rem; font-weight: 600; } .ap-seg button .ico { width: 15px; height: 15px } .ap-seg button[aria-pressed="true"] { background: var(--surface); color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,.2) } .ap-pals { display: flex; flex-direction: column; gap: 2px } .ap-pals button { display: flex; align-items: center; gap: .6rem; min-height: 40px; padding: 0 .5rem; border: 1px solid transparent; border-radius: var(--radius-sm); background: none; color: var(--text2); font-size: .86rem; font-weight: 500; text-align: left; } .ap-pals button:hover { background: var(--surface2); color: var(--text) } .ap-pals button[aria-pressed="true"] { color: var(--text); border-color: var(--border-strong); background: var(--surface2) } .ap-swatch { width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0; background: linear-gradient(135deg, var(--sw) 0 50%, var(--sw-bg) 50% 100%); box-shadow: inset 0 0 0 1px rgba(255,255,255,.18), 0 0 0 1px rgba(0,0,0,.25); } .ap-check { margin-left: auto; display: none; color: var(--text) } .ap-check .ico { width: 16px; height: 16px } .ap-pals button[aria-pressed="true"] .ap-check { display: inline-flex } /* ── Formularios ──────────────────────────────────────────────── */ .field { display: flex; flex-direction: column; gap: .35rem } .field > label, .label { font-size: .75rem; font-weight: 600; color: var(--text2); text-transform: uppercase; letter-spacing: .05em; } .input, .field input, .field select, .field textarea { width: 100%; min-height: 42px; background: var(--surface2); border: 1px solid var(--border); color: var(--text); padding: .55rem .75rem; border-radius: var(--radius-sm); font-size: .9rem; transition: border-color .15s var(--ease), box-shadow .15s var(--ease), background-color .15s var(--ease); } .input::placeholder, .field input::placeholder, .field textarea::placeholder { color: var(--text3) } .input:focus, .field input:focus, .field select:focus, .field textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); background: var(--surface); } input[type=checkbox], input[type=range] { accent-color: var(--accent) } /* ── Chips / insignias ────────────────────────────────────────── */ .chip { display: inline-flex; align-items: center; gap: .3rem; font-size: .75rem; font-weight: 600; padding: .22rem .6rem; border-radius: 999px; background: var(--surface2); border: 1px solid var(--border); color: var(--text2); } .chip .ico { width: 13px; height: 13px } .chip-key { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent2) } /* ── Modal ────────────────────────────────────────────────────── */ .modal-overlay { position: fixed; inset: 0; z-index: 1000; background: rgba(5,5,15,.72); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; padding: 1rem; animation: fade-in .18s var(--ease); } .modal-box { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); width: 100%; max-width: 660px; max-height: 92vh; overflow-y: auto; padding: 1.25rem; animation: pop-in .2s var(--ease); } .modal-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: 1rem } .modal-title { font-size: 1.05rem; font-weight: 700; color: var(--text) } @keyframes fade-in { from { opacity: 0 } to { opacity: 1 } } @keyframes pop-in { from { opacity: 0; transform: translateY(8px) scale(.98) } to { opacity: 1; transform: none } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important } }