/* ═══════════════════════════════════════════════════════════════ PANEL V3 (beta, aditivo/removible) — "FICHA DEL ARCHIVO" (modo claro) RE-SKIN del panel ESTÁNDAR (v1). Identidad: catálogo/códice de biblioteca con sabor letterpress — NO un tracker genérico. La distinción la marcan la TIPOGRAFÍA (Cinzel de inscripción para etiquetas/títulos · Playfair para títulos de libro · JetBrains Mono para los DATOS de ficha), el papel cálido con grano, las tarjetas como "hojas de catálogo" con filete dorado y marcas de registro, y la nota tratada como SELLO estampado. Solo CSS, bajo `.codex-theme-v3`. Borrar este archivo + su + las líneas "Panel v3" en app.js deja v1 intacto. ═══════════════════════════════════════════════════════════════ */ /* Fondo de papel robusto a nivel de página (clase puesta por CodexThemeV3Frame). El del sitio es oscuro fijo + hay un .noise-overlay global z-index 10000. */ body.codex-theme-v3-active { background: #ebe3d1 !important; } body.codex-theme-v3-active .noise-overlay { display: none !important; } html.codex-theme-v3-active::-webkit-scrollbar, html.codex-theme-v3-active::-webkit-scrollbar-track { background: #e4dcc8 !important; } html.codex-theme-v3-active::-webkit-scrollbar-thumb { background: #c2b69c !important; border: 3px solid #e4dcc8 !important; border-radius: 0; } .codex-theme-v3 { /* Rampa slate invertida → tinta cálida sobre papel */ --slate-950: #f7f1e4; --slate-900: #ebe3d1; --slate-800: #ddd3bd; --slate-700: #c2b69c; --slate-600: #8c8169; --slate-500: #756b56; --slate-400: #5b5344; --slate-300: #463f33; --slate-200: #2f291f; --slate-100: #221c14; --cyan-neon: #2f7d8a; --cyan-light: #3a93a1; --cyan-dark: #245f69; --gold-metallic: #9c7a3c; --gold-light: #b89455; --gold-dark: #6f5526; /* Códice */ --paper: #ebe3d1; --leaf: #f7f1e4; --leaf-2: #f0e8d6; --ink: #221c14; --ink-soft: #5b5344; --ink-faint: #8c8169; --rule: #d6cab2; --rule-soft: #e4dcc8; --gold: #9c7a3c; --gold-soft: #b89455; --seal: #8a3528; /* sello oxblood — uso parco */ --teal: #1f6b78; /* cian envejecido (verdigrís) — "la tinta del Cronista" */ --teal-soft: #2f7d8a; --teal-deep: #15535e; --press: 0 1px 2px rgba(70,52,24,.10), 0 14px 30px -18px rgba(70,52,24,.32); --font-insc: 'Cinzel', Georgia, serif; --font-disp: 'Playfair Display', Georgia, serif; --font-mono: 'JetBrains Mono', ui-monospace, monospace; min-height: 100vh; background: var(--paper); color: var(--ink); } /* ── Papel: grano sutil + halo cálido (atmósfera reaprovechada) ── */ .codex-theme-v3 .panel-atmosphere { background: radial-gradient(1200px 760px at 50% -12%, rgba(156,122,60,.06), transparent 60%), var(--paper); } .codex-theme-v3 .panel-grain { display: block; opacity: .16; mix-blend-mode: multiply; } .codex-theme-v3 .panel-scanlines, .codex-theme-v3 .panel-grid-bg { display: none !important; } .codex-theme-v3 .panel-orb { animation: none !important; } .codex-theme-v3 .panel-orb--cyan { background: radial-gradient(circle, rgba(47,125,138,.035) 0%, transparent 70%); } .codex-theme-v3 .panel-orb--gold { background: radial-gradient(circle, rgba(156,122,60,.06) 0%, transparent 70%); } .codex-theme-v3 .panel-container { padding-top: 1.75rem; } /* ═══════════════ MASTHEAD ═══════════════ */ .codex-theme-v3 .panel-header { /* doble filete del frontispicio: oro + teal (los dos colores del logo) */ background-image: linear-gradient(var(--gold), var(--gold)), linear-gradient(var(--teal), var(--teal)); background-repeat: no-repeat; background-size: 100% 2px, 100% 1.5px; background-position: left bottom, left bottom 5px; padding-bottom: 1.1rem; margin-bottom: 1.9rem; } .codex-theme-v3 .panel-header::after { display: none; } .codex-theme-v3 .panel-title { font-family: var(--font-insc); font-weight: 600; color: var(--ink); letter-spacing: .3em; text-shadow: none; } .codex-theme-v3 .panel-back-btn { font-family: var(--font-mono); background: var(--leaf); border: 1px solid var(--rule); border-radius: 2px; color: var(--ink-soft); } .codex-theme-v3 .panel-back-btn:hover { background: var(--leaf-2); border-color: var(--gold-soft); color: var(--ink); } /* ═══════════════ HOJA DE CATÁLOGO (sección) ═══════════════ */ .codex-theme-v3 .panel-section { background: var(--leaf); border: 1px solid var(--rule); border-top: 2px solid var(--gold); border-radius: 3px; box-shadow: var(--press); padding: 1.85rem; } .codex-theme-v3 .panel-section::before { display: none; } /* marcas de registro en las esquinas, en tinta */ .codex-theme-v3 .panel-section .showcase-corner::before, .codex-theme-v3 .panel-section .showcase-corner::after { background: var(--ink); box-shadow: none; opacity: .55; } /* Encabezados de sección como rótulos de inscripción */ .codex-theme-v3 .panel-section-title, .codex-theme-v3 .codex-personal-title { font-family: var(--font-insc); font-weight: 600; color: var(--ink); letter-spacing: .2em; text-shadow: none; } /* ═══════════════ TIRA DE IDENTIDAD ═══════════════ */ .codex-theme-v3 .panel-identity-strip { border-bottom: 1px solid var(--rule); } .codex-theme-v3 .panel-identity-avatar { filter: none; } .codex-theme-v3 .panel-identity-name:hover { color: var(--teal); } .codex-theme-v3 .panel-identity-name:hover .panel-name-edit-icon-sm { color: var(--teal); } .codex-theme-v3 .panel-identity-name-input { background: var(--leaf-2); border-color: rgba(156,122,60,.4); color: var(--ink); } .codex-theme-v3 .panel-identity-name-input:focus { border-color: var(--teal); box-shadow: none; } .codex-theme-v3 .panel-identity-date { font-family: var(--font-mono); } .codex-theme-v3 .panel-identity-votes { font-family: var(--font-mono); } .codex-theme-v3 .panel-identity-votes strong { color: var(--ink); text-shadow: none; } .codex-theme-v3 .panel-hero-body { border-top: 1px solid var(--rule-soft); gap: 1.5rem; } /* ═══════════════ LECTURA ACTUAL ═══════════════ */ .codex-theme-v3 .panel-current-read-cover { border: 1px solid var(--rule); border-radius: 2px; box-shadow: 0 2px 4px rgba(70,52,24,.12), 0 14px 26px -16px rgba(70,52,24,.4); } .codex-theme-v3 .panel-current-read-cover:hover { border-color: var(--gold-soft); } /* "Leyendo ahora" = sello de estado en oxblood */ .codex-theme-v3 .panel-current-read-badge { font-family: var(--font-insc); font-weight: 600; color: var(--seal); letter-spacing: .18em; } .codex-theme-v3 .panel-current-read-title:hover { color: var(--teal); } .codex-theme-v3 .panel-current-read-empty { border: 1px dashed var(--rule); border-radius: 2px; } .codex-theme-v3 .panel-current-read-add-btn { font-family: var(--font-mono); color: var(--gold-dark); background: var(--leaf-2); border: 1px solid var(--rule); border-radius: 2px; } .codex-theme-v3 .panel-current-read-add-btn:hover { background: rgba(156,122,60,.12); border-color: var(--gold-soft); color: var(--ink); } /* ═══════════════ MÉTRICAS (fichas de ledger) ═══════════════ */ .codex-theme-v3 .panel-metrics-grid { gap: .6rem .7rem; } .codex-theme-v3 .panel-metric-cell { background: var(--leaf-2); border: 1px solid var(--rule-soft); border-radius: 2px; } .codex-theme-v3 .panel-metric-cell:hover { border-color: var(--gold-soft); background: #efe7d6; } .codex-theme-v3 .panel-metric-cell::before { display: none; } .codex-theme-v3 .panel-metric-label { font-family: var(--font-insc); font-weight: 600; letter-spacing: .12em; color: var(--ink); text-transform: uppercase; } .codex-theme-v3 .panel-metric-value { font-family: var(--font-mono); } .codex-theme-v3 .panel-metric-track { background: var(--rule-soft); } .codex-theme-v3 .panel-metric-tag { font-family: var(--font-mono); } .codex-theme-v3 .panel-metric-help:hover, .codex-theme-v3 .panel-metric-help.active { border-color: var(--gold); color: var(--gold-dark); box-shadow: none; } .codex-theme-v3 .panel-metric-tooltip { background: var(--ink); border-color: var(--ink); color: #f1ead9; box-shadow: 0 10px 24px rgba(40,30,15,.3); } .codex-theme-v3 .panel-metric-tooltip::after { border-top-color: var(--ink); } /* Gauges (si se muestran) */ .codex-theme-v3 .panel-gauge { background: var(--leaf-2); border-radius: 3px; } .codex-theme-v3 .panel-gauge:hover { background: #efe7d6; } .codex-theme-v3 .panel-gauge-label { font-family: var(--font-insc); letter-spacing: .1em; color: var(--ink); } .codex-theme-v3 .panel-gauge-number { font-family: var(--font-mono); } .codex-theme-v3 .panel-gauge-tooltip { background: var(--ink); border-color: var(--ink); color: #f1ead9; box-shadow: 0 10px 24px rgba(40,30,15,.3); } .codex-theme-v3 .panel-gauge-tooltip::after { border-top-color: var(--ink); } .codex-theme-v3 .panel-stat-v2-up::before { animation: none; box-shadow: none; } .codex-theme-v3 .panel-stat-v2-down::before { box-shadow: none; } /* ═══════════════ FILTROS DE PERIODO (datos en mono) ═══════════════ */ .codex-theme-v3 .panel-help-icon:hover, .codex-theme-v3 .panel-help-icon:focus { border-color: var(--gold); color: var(--gold-dark); box-shadow: none; } .codex-theme-v3 .panel-help-tooltip { background: var(--ink); border-color: var(--ink); color: #f1ead9; box-shadow: 0 10px 24px rgba(40,30,15,.3); } .codex-theme-v3 .panel-period-filter { background: var(--leaf-2); border: 1px solid var(--rule-soft); border-radius: 2px; } .codex-theme-v3 .panel-period-btn:hover { color: var(--ink); background: rgba(156,122,60,.1); } .codex-theme-v3 .panel-period-btn.active { color: var(--leaf); background: var(--ink); } .codex-theme-v3 .panel-period-select { background-color: var(--leaf); border: 1px solid var(--rule); border-radius: 2px; color: var(--ink); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%239c7a3c'/%3E%3C/svg%3E"); } .codex-theme-v3 .panel-period-select:hover { border-color: var(--gold-soft); } .codex-theme-v3 .panel-period-select option { background: var(--leaf); color: var(--ink); } /* ═══════════════ REGISTRO / HISTORIAL ═══════════════ */ .codex-theme-v3 .panel-vote-cover::after { background: radial-gradient(ellipse 80% 60% at 50% 100%, rgba(40,30,15,.14) 0%, transparent 60%), linear-gradient(180deg, transparent 65%, rgba(40,30,15,.1) 100%); } /* nota = sello estampado */ .codex-theme-v3 .panel-vote-score-badge { font-family: var(--font-mono); color: var(--ink); text-shadow: none; background: rgba(247,241,228,.94); border: 1px solid var(--gold); border-radius: 2px; } .codex-theme-v3 .panel-vote-title { color: var(--ink-soft); } .codex-theme-v3 .panel-show-all-btn { font-family: var(--font-insc); letter-spacing: .14em; color: var(--ink-soft); background: var(--leaf); border: 1px solid var(--rule); border-radius: 2px; } .codex-theme-v3 .panel-show-all-btn:hover { background: var(--leaf-2); border-color: var(--gold-soft); color: var(--ink); box-shadow: none; } /* ═══════════════ BIBLIOTECA / LÁMINAS ═══════════════ */ .codex-theme-v3 .panel-showcase-grid { gap: 1.85rem 1.5rem; } .codex-theme-v3 .panel-showcase-card { --card-border: var(--rule); } .codex-theme-v3 .panel-showcase-card:hover { --card-border: var(--gold); } .codex-theme-v3 .panel-showcase-card::before { background: var(--leaf); } .codex-theme-v3 .panel-showcase-cover { border: 1px solid var(--rule); border-radius: 1px; box-shadow: 0 2px 4px rgba(70,52,24,.12), 0 12px 22px -14px rgba(70,52,24,.4); } .codex-theme-v3 .panel-showcase-cover::after { background: radial-gradient(ellipse 80% 60% at 50% 100%, rgba(40,30,15,.13) 0%, transparent 60%), linear-gradient(180deg, transparent 65%, rgba(40,30,15,.08) 100%); } .codex-theme-v3 .panel-showcase-title { font-family: var(--font-disp); color: var(--ink); } .codex-theme-v3 .panel-showcase-title:hover { color: var(--teal); } .codex-theme-v3 .panel-showcase-author { color: var(--ink-faint); } .codex-theme-v3 .panel-showcase-footer { border-top: 1px solid var(--rule-soft); } .codex-theme-v3 .panel-showcase-genre { font-family: var(--font-mono); color: var(--ink-faint); } .codex-theme-v3 .panel-showcase-seal { background: var(--leaf-2); border: 1px dashed var(--rule); border-radius: 2px; } .codex-theme-v3 .panel-showcase-remove { background: var(--seal); border-color: rgba(255,255,255,.2); border-radius: 2px; } .codex-theme-v3 .panel-showcase-remove:hover { background: #6f2820; } /* Tira de notas (CODEX / TU NOTA) = bloque de sello */ .codex-theme-v3 .panel-score-readout { border-top: 1px solid var(--rule); } .codex-theme-v3 .panel-score-cell-label { font-family: var(--font-insc); letter-spacing: .14em; color: rgba(34,28,20,.6); } .codex-theme-v3 .panel-score-cell--user .panel-score-cell-label { color: var(--gold-dark); } .codex-theme-v3 .panel-score-cell-value { font-family: var(--font-mono); } .codex-theme-v3 .panel-score-divider { background: var(--rule); } /* ═══════════════ CABECERA BIBLIOTECA + PESTAÑAS (separadores de archivador) ═══════════════ */ .codex-theme-v3 .codex-personal-total { font-family: var(--font-mono); color: var(--ink-faint); } .codex-theme-v3 .codex-toggle-all-btn { background: var(--leaf-2); color: var(--ink-soft); border-radius: 2px; } .codex-theme-v3 .codex-toggle-all-btn:hover { background: rgba(156,122,60,.14); color: var(--ink); } .codex-theme-v3 .codex-add-section-btn { font-family: var(--font-mono); background: var(--leaf-2); color: var(--gold-dark); border-radius: 2px; } .codex-theme-v3 .codex-add-section-btn:hover { background: rgba(156,122,60,.16); } .codex-theme-v3 .codex-tab-bar { border-bottom: 1px solid var(--rule); } .codex-theme-v3 .codex-tab-bar-wrap::before { background: linear-gradient(to right, var(--leaf), transparent); } .codex-theme-v3 .codex-tab-bar-wrap::after { background: linear-gradient(to left, var(--leaf), transparent); } .codex-theme-v3 .codex-tab { font-family: var(--font-insc); font-weight: 600; letter-spacing: .1em; color: var(--ink-faint); } .codex-theme-v3 .codex-tab:hover { color: var(--ink); } .codex-theme-v3 .codex-tab--active { color: var(--ink); border-bottom: 2px solid var(--teal); } .codex-theme-v3 .codex-tab-count { font-family: var(--font-mono); } .codex-theme-v3 .codex-tab--active .codex-tab-count { color: var(--teal); } .codex-theme-v3 .codex-section-action-btn:hover { color: var(--gold-dark); background: rgba(156,122,60,.1); } /* ═══════════════ GLOWS FUERA ═══════════════ */ .codex-theme-v3 .panel-title, .codex-theme-v3 .panel-section-title, .codex-theme-v3 .codex-personal-title, .codex-theme-v3 .panel-identity-votes strong, .codex-theme-v3 .panel-score-cell-value, .codex-theme-v3 .panel-showcase-score-badge, .codex-theme-v3 .panel-seal-score, .codex-theme-v3 .panel-vote-score-badge, .codex-theme-v3 .panel-gauge-number { text-shadow: none !important; } /* ═══════════════ NOTA = SELLO ESTAMPADO (5 tonos, oscurecidos para leerse en papel) ═══════════════ El número de la ficha va enmarcado como un sello; el color de tier se conserva pero oscurecido con filter (las portadas NO llevan filtro). */ .codex-theme-v3 .panel-showcase-score-badge { font-family: var(--font-mono); color: var(--teal) !important; border: 1px solid currentColor; border-radius: 2px; padding: 1px 5px; } /* Codex Score = "tinta del Cronista" (teal): unifica los puntajes del sitio y marca. La nota PERSONAL del usuario conserva su tono de tier. */ .codex-theme-v3 .panel-score-cell:not(.panel-score-cell--user) .panel-score-cell-value, .codex-theme-v3 .panel-seal-score { color: var(--teal) !important; } /* Tonos de tier (oscurecidos para papel) solo en métricas/gauges y en la nota del USUARIO */ .codex-theme-v3 .panel-metric-value, .codex-theme-v3 .panel-metric-tag, .codex-theme-v3 .panel-metric-fill, .codex-theme-v3 .panel-metric-scanner, .codex-theme-v3 .panel-gauge-number, .codex-theme-v3 .panel-gauge-svg, .codex-theme-v3 .panel-score-cell--user .panel-score-cell-value { filter: saturate(1.05) brightness(.58); }