/* ============================================================ MANGACODEX — Hoja de estilos principal Sistema dual: modo claro (defecto) + modo oscuro Paleta: beige cálido + negro estructura + esmeralda acento ============================================================ */ /* ------------------------------------------------------------ FUENTES — self-hosted (variable fonts, subset latin) ------------------------------------------------------------ */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('../fonts/inter-latin-variable.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 500; font-display: swap; src: url('../fonts/jetbrains-mono-latin-variable.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* ------------------------------------------------------------ VARIABLES — MODO CLARO ------------------------------------------------------------ */ :root { --bg: #F0EDE6; --surface: #F7F4EE; --surface-2: #EDEAE3; --border: #DDD9CF; --border-strong: #C8C4BA; --structure: #1A1A1A; --structure-text: #F0EDE6; --text: #1A1A1A; --text-muted: #6B6B67; --text-faint: #999590; --accent: #2A7A5A; --accent-hover: #215F46; --accent-dim: rgba(42,122,90,0.10); --accent-text: #fff; --badge-on-bg: #b9dfcb; --badge-on-fg: #17583e; --badge-fin-bg: #929290; --badge-fin-fg: #fcfcf9; --font: 'Inter', system-ui, -apple-system, sans-serif; --font-mono: 'JetBrains Mono', 'Courier New', monospace; --text-xs: 0.72rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.125rem; --text-xl: 1.25rem; --text-2xl: 1.5rem; --text-3xl: 2rem; --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-12: 3rem; --space-16: 4rem; --max-width: 1280px; --radius-sm: 4px; --radius: 8px; --radius-lg: 12px; --transition: 150ms ease; --warning: #E8873A; } /* ------------------------------------------------------------ VARIABLES — MODO OSCURO ------------------------------------------------------------ */ [data-theme="dark"] { --bg: #0d0d0d; --surface: #161616; --surface-2: #1e1e1e; --border: #2a2a2a; --border-strong: #383838; --structure: #161616; --structure-text: #e2e2e2; --text: #e2e2e2; --text-muted: #888; --text-faint: #444; --accent: #3DB87A; --accent-hover: #34A06A; --accent-dim: rgba(61,184,122,0.10); --accent-text: #0d0d0d; --badge-on-bg: rgba(61,184,122,0.12); --badge-on-fg: #3DB87A; --badge-fin-bg: #1e1e1e; --badge-fin-fg: #555; --warning: #F09A50; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #0d0d0d; --surface: #161616; --surface-2: #1e1e1e; --border: #2a2a2a; --border-strong: #383838; --structure: #161616; --structure-text: #e2e2e2; --text: #e2e2e2; --text-muted: #888; --text-faint: #444; --accent: #3DB87A; --accent-hover: #34A06A; --accent-dim: rgba(61,184,122,0.10); --accent-text: #0d0d0d; --badge-on-bg: rgba(61,184,122,0.12); --badge-on-fg: #3DB87A; --badge-fin-bg: #1e1e1e; --badge-fin-fg: #555; } } /* ------------------------------------------------------------ RESET MÍNIMO ------------------------------------------------------------ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: var(--font); font-size: var(--text-base); line-height: 1.6; color: var(--text); background: var(--bg); min-height: 100vh; display: flex; flex-direction: column; transition: background var(--transition), color var(--transition); } img, svg { display: block; max-width: 100%; } a { color: var(--accent); text-decoration: none; transition: color var(--transition); } a:hover { color: var(--accent-hover); } ul, ol { list-style: none; } button { cursor: pointer; font-family: inherit; border: none; background: none; } /* ------------------------------------------------------------ LAYOUT ------------------------------------------------------------ */ .container { width: 100%; max-width: var(--max-width); margin: 0 auto; padding: 0 var(--space-4); } @media (min-width: 768px) { .container { padding: 0 var(--space-8); } } .site-main { flex: 1; } /* ------------------------------------------------------------ HEADER ------------------------------------------------------------ */ .site-header { position: sticky; top: 0; z-index: 100; background: var(--structure); border-bottom: 1px solid rgba(255,255,255,0.06); transition: background var(--transition); } [data-theme="dark"] .site-header { border-bottom-color: var(--border); } .site-header__inner { display: flex; align-items: center; gap: var(--space-4); height: 52px; } .site-header__logo { font-size: var(--text-lg); font-weight: 600; color: var(--structure-text); letter-spacing: -0.02em; flex-shrink: 0; transition: color var(--transition); } .site-header__logo:hover { color: var(--accent); } /* Toggle de tema */ .theme-toggle { display: flex; align-items: center; gap: var(--space-2); margin-left: auto; cursor: pointer; padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); transition: background var(--transition); flex-shrink: 0; user-select: none; } .theme-toggle:hover { background: rgba(255,255,255,0.08); } .theme-toggle__icon { font-size: 13px; color: var(--structure-text); opacity: 0.5; line-height: 1; } .theme-toggle__track { width: 30px; height: 17px; border-radius: 99px; background: var(--accent); position: relative; transition: background var(--transition); flex-shrink: 0; } .theme-toggle__thumb { width: 12px; height: 12px; border-radius: 50%; background: #fff; position: absolute; top: 2.5px; left: 2.5px; transition: transform var(--transition); } [data-theme="dark"] .theme-toggle__thumb, body.dark .theme-toggle__thumb { transform: translateX(13px); } /* Botón hamburguesa */ .nav-toggle { display: flex; flex-direction: column; gap: 5px; padding: var(--space-2); } .nav-toggle span { display: block; width: 20px; height: 1.5px; background: var(--structure-text); border-radius: 2px; opacity: 0.7; transition: transform var(--transition), opacity var(--transition); } .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); opacity: 1; } .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); opacity: 1; } @media (min-width: 768px) { .nav-toggle { display: none; } } /* ------------------------------------------------------------ NAV ------------------------------------------------------------ */ .site-nav { background: var(--structure); border-bottom: 1px solid rgba(255,255,255,0.05); display: none; transition: background var(--transition); position: relative; z-index: 90; } [data-theme="dark"] .site-nav { border-bottom-color: var(--border); } .site-nav.is-open { display: block; } @media (min-width: 768px) { .site-nav { display: block; } } .site-nav__inner { display: flex; align-items: center; flex-wrap: wrap; } @media (min-width: 768px) { .site-nav__inner { flex-wrap: nowrap; } } .nav__list { display: flex; flex-direction: column; width: 100%; } @media (min-width: 768px) { .nav__list { flex-direction: row; gap: var(--space-1); width: auto; } } .nav__item { position: relative; } .nav__item--dropdown { display: flex; flex-direction: column; } @media (min-width: 768px) { .nav__item--dropdown { flex-direction: row; align-items: center; } } .nav__link { display: flex; align-items: center; gap: var(--space-1); padding: var(--space-3) var(--space-4); font-size: var(--text-sm); font-weight: 500; color: rgba(240,237,230,0.5); transition: color var(--transition); white-space: nowrap; } [data-theme="dark"] .nav__link { color: var(--text-faint); } .nav__link:hover { color: var(--structure-text); } .nav__link--active { color: var(--accent) !important; } .nav__arrow { transition: transform var(--transition); flex-shrink: 0; } .nav__dropdown { display: none; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-2) 0; } @media (min-width: 768px) { .nav__dropdown { position: absolute; top: calc(100% + 4px); left: 0; min-width: 190px; padding: var(--space-2) 0; box-shadow: 0 8px 24px rgba(0,0,0,0.12); z-index: 200; } [data-theme="dark"] .nav__dropdown { box-shadow: 0 8px 24px rgba(0,0,0,0.5); } } /* Botón del dropdown (mismo aspecto que nav__link) */ .nav__dropdown-toggle { background: none; border: none; cursor: pointer; width: 100%; text-align: left; font-family: var(--font); color: rgba(240,237,230,0.5); } [data-theme="dark"] .nav__dropdown-toggle { color: var(--text-faint); } .nav__dropdown-toggle.nav__link--active { color: var(--accent) !important; } .nav__item--dropdown:hover .nav__dropdown, .nav__item--dropdown:focus-within .nav__dropdown { display: block; } .nav__item--dropdown:hover .nav__arrow { transform: rotate(180deg); } .nav__item--dropdown.is-open .nav__dropdown { display: block; } .nav__item--dropdown.is-open .nav__arrow { transform: rotate(180deg); } .nav__dropdown-link { display: block; padding: var(--space-2) var(--space-4); font-size: var(--text-sm); color: var(--text-muted); transition: color var(--transition), background var(--transition); } .nav__dropdown-link:hover, .nav__dropdown-link--active { color: var(--text); background: var(--surface-2); } /* ------------------------------------------------------------ BÚSQUEDA GLOBAL ------------------------------------------------------------ */ .nav-search { position: relative; width: 100%; padding: var(--space-2) var(--space-4); } .nav-search__input { width: 100%; padding: var(--space-2) var(--space-3); background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.14); border-radius: var(--radius-sm); color: var(--structure-text); font-family: var(--font); font-size: var(--text-sm); transition: border-color var(--transition), background var(--transition); } .nav-search__input::-webkit-search-cancel-button { display: none; } .nav-search__input::placeholder { color: rgba(240,237,230,0.35); } .nav-search__input:focus { outline: none; background: rgba(255,255,255,0.12); border-color: var(--accent); } .nav-search__results { position: absolute; top: 100%; left: var(--space-4); right: var(--space-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 8px 24px rgba(0,0,0,0.12); z-index: 300; list-style: none; margin: 2px 0 0; padding: var(--space-1) 0; max-height: 420px; overflow-y: auto; } [data-theme="dark"] .nav-search__results { box-shadow: 0 8px 24px rgba(0,0,0,0.5); } @media (min-width: 768px) { .nav-search { width: 220px; padding: var(--space-2) 0; margin-left: auto; flex-shrink: 0; } .nav-search__results { left: auto; right: 0; width: 360px; } } /* ------------------------------------------------------------ FOOTER ------------------------------------------------------------ */ .site-footer { background: var(--structure); border-top: 1px solid rgba(255,255,255,0.06); margin-top: auto; transition: background var(--transition); } [data-theme="dark"] .site-footer { border-top-color: var(--border); } .site-footer__inner { display: grid; grid-template-columns: 1fr; gap: var(--space-8); padding-top: var(--space-8); padding-bottom: var(--space-8); } @media (min-width: 768px) { .site-footer__inner { grid-template-columns: 1fr 2fr; padding-top: var(--space-12); padding-bottom: var(--space-8); } } .site-footer__logo { font-size: var(--text-xl); font-weight: 600; color: var(--structure-text); } .site-footer__tagline { margin-top: var(--space-2); font-size: var(--text-sm); color: rgba(240,237,230,0.35); } [data-theme="dark"] .site-footer__tagline { color: var(--text-faint); } .site-footer__nav { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-8); } @media (min-width: 768px) { .site-footer__nav { grid-template-columns: repeat(3, 1fr); } } .footer-col__title { font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(240,237,230,0.25); margin-bottom: var(--space-3); } [data-theme="dark"] .footer-col__title { color: var(--text-faint); } .footer-col__list { display: flex; flex-direction: column; gap: var(--space-2); } .footer-col__list a { font-size: var(--text-sm); color: rgba(240,237,230,0.45); } [data-theme="dark"] .footer-col__list a { color: var(--text-muted); } .footer-col__list a:hover { color: var(--accent); } .site-footer__bottom { border-top: 1px solid rgba(255,255,255,0.05); padding: var(--space-4) 0; } [data-theme="dark"] .site-footer__bottom { border-top-color: var(--border); } .site-footer__bottom p { font-size: var(--text-xs); color: rgba(240,237,230,0.2); line-height: 1.8; } [data-theme="dark"] .site-footer__bottom p { color: var(--text-faint); } /* ------------------------------------------------------------ TIPOGRAFÍA ------------------------------------------------------------ */ .page-title { font-size: var(--text-2xl); font-weight: 600; letter-spacing: -0.02em; margin-bottom: var(--space-2); color: var(--text); } @media (min-width: 768px) { .page-title { font-size: var(--text-3xl); } } .page-subtitle { font-size: var(--text-base); color: var(--text-muted); margin-bottom: var(--space-8); } .section-title { font-size: var(--text-base); font-weight: 600; margin-bottom: var(--space-4); padding-bottom: var(--space-2); border-bottom: 1px solid var(--border); color: var(--text); } .section-header { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: var(--space-4); padding-bottom: var(--space-2); border-bottom: 1px solid var(--border); } .section-header .section-title { margin-bottom: 0; border-bottom: none; padding-bottom: 0; } .section-meta { font-size: var(--text-xs); color: var(--text-faint); } /* ------------------------------------------------------------ TABLAS ------------------------------------------------------------ */ .table-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--border); border-radius: var(--radius-lg); } .data-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); } .data-table th { padding: var(--space-3) var(--space-4); text-align: left; font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--structure-text); background: var(--structure); border-bottom: 1px solid var(--border); white-space: nowrap; opacity: 0.7; } .data-table th.text-right, .data-table td.text-right { text-align: right; } .data-table th.text-center, .data-table td.text-center { text-align: center; } .data-table td { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border); color: var(--text); vertical-align: middle; transition: background var(--transition); } .data-card__scroll .data-table { table-layout: fixed; width: 100%; } .data-table .title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .data-table tbody tr:last-child td { border-bottom: none; } .data-table tbody tr:hover td { background: var(--surface-2); } .data-table .rank { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-faint); text-align: center; width: 40px; } .data-table .number { font-family: var(--font-mono); font-size: var(--text-sm); text-align: right; white-space: nowrap; color: var(--text-muted); } .data-table .muted { color: var(--text-muted); font-size: var(--text-sm); } /* Indicadores de columna ordenada */ .data-table th.sorted-asc::after { content: ' ↑'; opacity: 1; } .data-table th.sorted-desc::after { content: ' ↓'; opacity: 1; } .data-table th[data-sort]::after { content: ' ↕'; opacity: 0.3; } /* Anchos fijos para tablas de sales — la columna title absorbe el resto */ .data-table .rank { width: 48px; } .data-table .vol { width: 80px; } .data-table .num { width: 130px; } .data-table .title { width: auto; min-width: 200px; } /* Reducir tamaño de fuente en tablas en móvil */ @media (max-width: 767px) { .data-table { font-size: var(--text-xs); } .data-table th { padding: var(--space-2) var(--space-3); } .data-table td { padding: var(--space-2) var(--space-3); } } /* Badges */ .badge { display: inline-block; padding: 2px 8px; border-radius: 99px; font-size: var(--text-xs); font-weight: 500; white-space: nowrap; } .badge--ongoing { background: var(--badge-on-bg); color: var(--badge-on-fg); } .badge--finished { background: var(--badge-fin-bg); color: var(--badge-fin-fg); } .badge--hiatus { background: var(--accent-dim); color: var(--accent); } .badge--unknown { background: var(--surface-2); color: var(--text-faint); } /* ------------------------------------------------------------ FILTROS ------------------------------------------------------------ */ .filters { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-6); padding: var(--space-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); } .filter-group { display: flex; flex-direction: column; gap: var(--space-1); flex: 1; min-width: 140px; } .filter-group label { font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-faint); } .filter-input, .filter-select { padding: var(--space-2) var(--space-3); background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); font-family: var(--font); font-size: var(--text-sm); transition: border-color var(--transition); width: 100%; } .filter-input:focus, .filter-select:focus { outline: none; border-color: var(--accent); } .filter-select option { background: var(--surface); color: var(--text); } /* ------------------------------------------------------------ BOTONES ------------------------------------------------------------ */ .btn { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-4); border-radius: var(--radius-sm); font-size: var(--text-sm); font-weight: 500; transition: all var(--transition); white-space: nowrap; cursor: pointer; border: 1px solid transparent; } .btn--primary { background: var(--accent); color: var(--accent-text); border-color: var(--accent); } .btn--primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--accent-text); } .btn--ghost { background: transparent; color: var(--text-muted); border-color: var(--border); } .btn--ghost:hover { color: var(--text); border-color: var(--border-strong); background: var(--surface-2); } /* ------------------------------------------------------------ CARDS ------------------------------------------------------------ */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-6); transition: border-color var(--transition), background var(--transition); } .card--link { display: block; cursor: pointer; } .card--link:hover { border-color: var(--accent); background: var(--surface-2); } .card__title { font-size: var(--text-base); font-weight: 600; color: var(--text); margin-bottom: var(--space-2); } .card__desc { font-size: var(--text-sm); color: var(--text-muted); line-height: 1.5; } .card-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-4); } @media (min-width: 640px) { .card-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .card-grid { grid-template-columns: repeat(3, 1fr); } } /* ------------------------------------------------------------ PAGINACIÓN ------------------------------------------------------------ */ .pagination { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-8); } .pagination__btn { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; padding: 0 var(--space-3); border-radius: var(--radius-sm); font-size: var(--text-sm); color: var(--text-muted); border: 1px solid var(--border); background: var(--surface); transition: all var(--transition); } .pagination__btn:hover { color: var(--text); border-color: var(--border-strong); background: var(--surface-2); } .pagination__btn--active { background: var(--accent); border-color: var(--accent); color: var(--accent-text); } .pagination__ellipsis { color: var(--text-faint); font-size: var(--text-sm); padding: 0 var(--space-2); } /* ------------------------------------------------------------ HOME — HERO ------------------------------------------------------------ */ .hero { padding: var(--space-16) 0 var(--space-12); border-bottom: 1px solid var(--border); } .hero__title { font-size: var(--text-3xl); font-weight: 600; letter-spacing: -0.03em; line-height: 1.15; margin-bottom: var(--space-4); color: var(--text); } @media (min-width: 768px) { .hero__title { font-size: 3.2rem; } } .hero__subtitle { font-size: var(--text-lg); color: var(--text-muted); max-width: 540px; margin-bottom: var(--space-8); line-height: 1.6; } .hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); } /* ------------------------------------------------------------ HOME — STATS ------------------------------------------------------------ */ .home-stats { padding: var(--space-12) 0; border-bottom: 1px solid var(--border); } .stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); } @media (min-width: 768px) { .stats-grid { grid-template-columns: repeat(var(--stat-cols, 4), 1fr); } } .stat-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-1); transition: background var(--transition), border-color var(--transition); } .stat-card__number { font-size: var(--text-2xl); font-weight: 600; font-family: var(--font-mono); color: var(--accent); letter-spacing: -0.02em; } .stat-card__label { font-size: var(--text-xs); color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.06em; } /* ------------------------------------------------------------ HOME — SECCIONES DE DATOS ------------------------------------------------------------ */ .home-section { padding: var(--space-12) 0; border-bottom: 1px solid var(--border); } .home-section:last-of-type { border-bottom: none; } /* ------------------------------------------------------------ ESTADO VACÍO ------------------------------------------------------------ */ .empty-state { text-align: center; padding: var(--space-16) var(--space-4); color: var(--text-muted); } .empty-state__title { font-size: var(--text-xl); font-weight: 600; color: var(--text); margin-bottom: var(--space-2); } /* ------------------------------------------------------------ UTILIDADES ------------------------------------------------------------ */ .text-muted { color: var(--text-muted); } .text-faint { color: var(--text-faint); } .text-accent { color: var(--accent); } .text-mono { font-family: var(--font-mono); } .text-right { text-align: right; } .text-center { text-align: center; } .text-sm { font-size: var(--text-sm); } .text-xs { font-size: var(--text-xs); } .mt-4 { margin-top: var(--space-4); } .mt-6 { margin-top: var(--space-6); } .mt-8 { margin-top: var(--space-8); } .mb-4 { margin-bottom: var(--space-4); } .mb-6 { margin-bottom: var(--space-6); } .mb-8 { margin-bottom: var(--space-8); } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; } /* ============================================================ AÑADIR AL FINAL DE style.css Estilos específicos del buscador — /series ============================================================ */ /* ------------------------------------------------------------ LAYOUT — sidebar + resultados ------------------------------------------------------------ */ .series-search { padding: var(--space-8) 0 var(--space-12); } /* Toggle de filtros (visible solo en móvil) */ .search-filters-toggle { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); font-size: var(--text-sm); font-family: var(--font); margin-bottom: var(--space-4); transition: border-color var(--transition), background var(--transition); } .search-filters-toggle:hover { border-color: var(--accent); } .search-filters-toggle__chevron { font-size: 10px; color: var(--text-muted); transition: transform var(--transition); } .search-filters-toggle[aria-expanded="true"] .search-filters-toggle__chevron { transform: rotate(180deg); } @media (min-width: 768px) { .search-filters-toggle { display: none; } } /* Layout principal */ .search-layout { display: grid; grid-template-columns: 1fr; gap: var(--space-6); } @media (min-width: 768px) { .search-layout { grid-template-columns: 260px 1fr; gap: var(--space-8); align-items: start; } } /* ------------------------------------------------------------ SIDEBAR ------------------------------------------------------------ */ .search-sidebar { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-6); transition: background var(--transition), border-color var(--transition); /* Móvil: oculto por defecto */ display: none; } .search-sidebar.is-open { display: block; } @media (min-width: 768px) { .search-sidebar { display: block; position: sticky; top: calc(52px + var(--space-4)); /* header sticky + aire */ } } .search-sidebar__form { display: flex; flex-direction: column; gap: var(--space-6); } .search-sidebar__group { border: none; padding: 0; margin: 0; } .search-sidebar__legend { font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-faint); margin-bottom: var(--space-2); padding: 0; } .search-sidebar__group--search .search-sidebar__legend { /* el input tiene su propio placeholder, no necesitamos legend */ display: none; } .search-sidebar__input { width: 100%; padding: var(--space-2) var(--space-3); background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); font-family: var(--font); font-size: var(--text-sm); transition: border-color var(--transition); } .search-sidebar__input:focus { outline: none; border-color: var(--accent); } .search-sidebar__input::placeholder { color: var(--text-faint); } /* Checkbox / radio rows */ .search-check { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-1) 0; font-size: var(--text-sm); color: var(--text); cursor: pointer; line-height: 1.4; } .search-check input[type="checkbox"], .search-check input[type="radio"] { accent-color: var(--accent); cursor: pointer; flex-shrink: 0; } .search-check span { user-select: none; } .search-sidebar__submit { width: 100%; justify-content: center; } /* ------------------------------------------------------------ RESULTADOS ------------------------------------------------------------ */ .search-results { min-width: 0; /* evita que la tabla rompa el grid */ } .search-results__header { margin-bottom: var(--space-6); } .search-results__title { font-size: var(--text-2xl); font-weight: 600; letter-spacing: -0.02em; margin-bottom: var(--space-2); } .search-results__summary { font-size: var(--text-sm); color: var(--text-muted); } .search-results__summary strong { color: var(--text); font-weight: 600; } /* ------------------------------------------------------------ TABLA DE RESULTADOS ------------------------------------------------------------ */ .results-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; transition: background var(--transition), border-color var(--transition); } .results-table thead { background: var(--surface-2); border-bottom: 1px solid var(--border); } .results-table th { text-align: left; padding: var(--space-3) var(--space-4); font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-faint); } .results-table__th-type { width: 140px; } .results-table__th-status { width: 120px; } .results-table td { padding: var(--space-3) var(--space-4); vertical-align: middle; border-bottom: 1px solid var(--border); } .results-table tbody tr:last-child td { border-bottom: none; } .results-table tbody tr:hover { background: var(--surface-2); } /* Type cell */ .kind { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--text-muted); font-size: var(--text-sm); white-space: nowrap; } .kind__icon { color: var(--accent); flex-shrink: 0; } .kind__label { line-height: 1; } /* Title cell */ .results-row__title { min-width: 0; } .results-row__link { color: var(--text); font-weight: 500; text-decoration: none; transition: color var(--transition); } .results-row__link:hover { color: var(--accent); } .results-row__jp { display: block; font-size: var(--text-xs); color: var(--text-faint); margin-top: 2px; line-height: 1.4; } /* Status cell */ .results-row__dash { color: var(--text-faint); font-size: var(--text-sm); } .status-pill { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-sm); line-height: 1; white-space: nowrap; } .status-pill--ongoing { color: var(--accent); } .status-pill--finished { color: var(--text-muted); } .status-pill--hiatus { color: var(--text-muted); } .status-pill__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex-shrink: 0; } /* ------------------------------------------------------------ RESPONSIVE — tabla en móvil ------------------------------------------------------------ */ @media (max-width: 600px) { .results-table th, .results-table td { padding: var(--space-2) var(--space-3); } .results-table__th-type { width: 105px; } .results-table__th-status { width: 92px; } .kind__label { display: none; } /* solo el icono en móvil */ .kind { gap: 0; } } /* ============================================================ AÑADIR AL FINAL DE style.css Estilos del multi-select de publishers (página /circulation) ============================================================ */ .pub-picker { position: relative; } .pub-picker__input { /* Reutiliza .search-sidebar__input ya existente */ width: 100%; margin-bottom: var(--space-2); } /* Lista desplegable de sugerencias */ .pub-picker__list { position: absolute; top: 38px; /* justo debajo del input */ left: 0; right: 0; z-index: 50; list-style: none; margin: 0; padding: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: 0 8px 24px rgba(0,0,0,0.1); max-height: 220px; overflow-y: auto; } [data-theme="dark"] .pub-picker__list { box-shadow: 0 8px 24px rgba(0,0,0,0.4); } .pub-picker__list[hidden] { display: none; } .pub-picker__item { padding: var(--space-2) var(--space-3); font-size: var(--text-sm); color: var(--text); cursor: pointer; border-bottom: 1px solid var(--border); transition: background var(--transition), color var(--transition); } .pub-picker__item:last-child { border-bottom: none; } .pub-picker__item:hover { background: var(--surface-2); color: var(--accent); } /* Contenedor de chips seleccionados */ .pub-picker__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--space-2); } .pub-picker__chips:empty { margin-top: 0; } /* Chip individual */ .pub-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 4px 3px 8px; background: var(--accent-dim); color: var(--accent); border-radius: 99px; font-size: var(--text-xs); line-height: 1.2; max-width: 100%; } .pub-chip__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 180px; } .pub-chip__remove { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; background: transparent; color: var(--accent); font-size: 14px; line-height: 1; padding: 0; cursor: pointer; flex-shrink: 0; transition: background var(--transition); } .pub-chip__remove:hover { background: var(--accent); color: var(--accent-text); } /* ------------------------------------------------------------ Wrap de la tabla — overflow horizontal en móvil ------------------------------------------------------------ */ .circ-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius-lg); } /* ------------------------------------------------------------ Magazine ficha — Circulation history: tabla + gráfico lado a lado ------------------------------------------------------------ */ .mag-circ-history { display: grid; grid-template-columns: 1fr; gap: var(--space-6); } @media (min-width: 1024px) { .mag-circ-history { grid-template-columns: 3fr 2fr; align-items: start; } } .mag-circ-history__chart .circ-chart-wrap { height: 320px; } /* Sort indicator (por si no estaba aún) */ .sort-ind { display: inline-block; margin-left: 2px; color: var(--text-faint); font-size: var(--text-xs); } /* ------------------------------------------------------------ Panel "carpeta": las tabs se conectan visualmente con la caja del contenido ------------------------------------------------------------ */ .circ-panel { background: var(--bg); border: 1px solid var(--border); border-radius: 0 var(--radius-lg) var(--radius-lg) var(--radius-lg); padding: var(--space-6); margin-top: -1px; /* solapa el borde inferior de las data-tabs */ } /* ------------------------------------------------------------ DATA TABS — pestañas de cambio de vista (usadas en /authors, /circulation, etc.) ------------------------------------------------------------ */ .data-tabs { display: flex; gap: var(--space-2); border-bottom: 1px solid var(--border); padding-bottom: var(--space-1); } .data-tab { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-4); border-radius: var(--radius-sm) var(--radius-sm) 0 0; font-size: var(--text-sm); font-weight: 500; color: var(--text-muted); border: 1px solid transparent; border-bottom: none; transition: all var(--transition); position: relative; bottom: -1px; text-decoration: none; } .data-tab:hover { color: var(--text); } .data-tab--active { color: var(--accent); background: var(--bg); border-color: var(--border); border-bottom-color: var(--bg); } /* Variante "boxed": caja con borde completo, activo relleno en verde */ .data-tabs--boxed { border-bottom: none; padding-bottom: 0; flex-wrap: wrap; } .data-tabs--boxed .data-tab { border: 1px solid var(--border); border-bottom: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text-muted); position: static; bottom: auto; } .data-tabs--boxed .data-tab:hover { color: var(--text); background: var(--surface-2); border-color: var(--border-strong); } .data-tabs--boxed .data-tab--active { background: var(--accent); border-color: var(--accent); color: var(--accent-text); } .data-tabs--boxed .data-tab--active:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--accent-text); } /* ============================================================ AÑADIR AL FINAL DE style.css Estilos específicos de la página /discover ============================================================ */ .discover-section { margin-bottom: var(--space-12); } .discover-section:last-child { margin-bottom: 0; } .discover-section__title { font-size: var(--text-xl); font-weight: 600; letter-spacing: -0.01em; margin-bottom: var(--space-4); color: var(--text); } /* ------------------------------------------------------------ DEMOGRAPHICS — fila de cards ------------------------------------------------------------ */ .demo-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); } @media (min-width: 600px) { .demo-grid { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1024px) { .demo-grid { grid-template-columns: repeat(6, 1fr); } } .demo-card { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); text-decoration: none; transition: border-color var(--transition), background var(--transition), transform var(--transition); } .demo-card:hover { border-color: var(--accent); background: var(--surface-2); } .demo-card__name { font-size: var(--text-base); font-weight: 600; color: var(--text); line-height: 1.3; } .demo-card__count { font-size: var(--text-xs); color: var(--text-faint); font-family: var(--font-mono); letter-spacing: 0.02em; } /* ------------------------------------------------------------ PUBLISHERS — agrupados por letra ------------------------------------------------------------ */ .pub-letters { display: flex; flex-direction: column; gap: var(--space-6); } .pub-letter { display: grid; grid-template-columns: 32px 1fr; gap: var(--space-4); align-items: start; } .pub-letter__header { font-family: var(--font-mono); font-size: var(--text-lg); font-weight: 600; color: var(--accent); line-height: 1; padding-top: 6px; /* alinea ópticamente con la primera fila de chips */ } .pub-letter__chips { display: flex; flex-wrap: wrap; gap: var(--space-2); } /* ------------------------------------------------------------ GENRES ------------------------------------------------------------ */ .genre-filter { margin-bottom: var(--space-4); max-width: 360px; } .genre-section { margin-bottom: var(--space-6); } .genre-section:last-child { margin-bottom: 0; } .genre-section__label { font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-faint); margin-bottom: var(--space-3); } .genre-list { display: flex; flex-wrap: wrap; gap: var(--space-2); } .genre-empty { color: var(--text-muted); font-size: var(--text-sm); padding: var(--space-3) 0; } /* ------------------------------------------------------------ CHIPS GENÉRICOS — usados por publishers y genres ------------------------------------------------------------ */ .entity-chip { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); text-decoration: none; font-size: var(--text-sm); color: var(--text); line-height: 1.2; transition: border-color var(--transition), background var(--transition), color var(--transition); } .entity-chip:hover { border-color: var(--accent); background: var(--surface-2); color: var(--text); } .entity-chip__name { /* nombre principal */ } .entity-chip__count { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-faint); } .entity-chip:hover .entity-chip__count { color: var(--accent); } /* ============================================================ AÑADIR AL FINAL DE style.css Estilos específicos de las fichas /demographic/ (también se reutilizarán en /publisher/ y /genre/) ============================================================ */ /* Descripción breve bajo el título de la ficha */ .demographic-description { font-size: var(--text-base); color: var(--text-muted); line-height: 1.6; max-width: 720px; margin-top: var(--space-3); } /* Hint pequeño dentro de un section title (ej: "week of Mar 15, 2025") */ .discover-section__hint { display: inline-block; margin-left: var(--space-2); font-size: var(--text-xs); font-weight: 400; color: var(--text-faint); text-transform: none; letter-spacing: 0; font-family: var(--font-mono); vertical-align: middle; } /* Grid de dos secciones lado a lado en desktop (genres + authors) */ .demo-cross-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-8); margin-bottom: var(--space-12); } @media (min-width: 768px) { .demo-cross-grid { grid-template-columns: 1fr 1fr; } } /* ------------------------------------------------------------ Grid 2×2 para los cuatro tops del demographic ------------------------------------------------------------ */ .demo-tops-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-8); margin-bottom: var(--space-12); } @media (min-width: 1024px) { .demo-tops-grid { grid-template-columns: 1fr 1fr; column-gap: var(--space-6); row-gap: var(--space-12); } } /* Las secciones dentro del grid no deben aplicar su margin-bottom propio, el spacing lo controla el gap del grid. */ .demo-tops-grid .discover-section { margin-bottom: 0; } /* Anchos consistentes en las tablas de tops: # → fijo angosto numérica derecha → mínimo necesario sin wrap Series → todo el resto */ .demo-tops-grid .data-table th.num, .demo-tops-grid .data-table td.num { width: 1%; white-space: nowrap; } .demo-tops-grid .data-table th:first-child, .demo-tops-grid .data-table td:first-child { width: 48px; } /* Permitir wrap de títulos largos al estrecharse las tablas a 2 columnas */ .demo-tops-grid .data-table td a, .demo-tops-grid .data-table td:nth-child(2) { word-break: break-word; overflow-wrap: anywhere; } .demo-tops-grid .data-table .month-cell { width: 1%; white-space: nowrap; color: var(--text-muted); font-family: var(--font-mono); font-size: var(--text-xs); } /* Centrar Week/Month + columna numérica de la derecha en las tablas de tops del demographic (weekly + monthly). No afecta a la tabla histórica ni a la de ongoing-circulation. */ .demo-tops-grid .data-table .month-cell { text-align: center; } /* Centrar la última columna (Sales / Top volume sales) en las tablas que tienen 4 columnas (las que llevan Week o Month). La tabla ongoing-circulation tiene solo 3 cols y NO se ve afectada. */ .demo-tops-grid .data-table th:nth-child(4), .demo-tops-grid .data-table td:nth-child(4) { text-align: center; } .demo-tops-grid .data-table th:nth-child(3) { text-align: center; } /* Centrar la columna Status en la tabla histórica del grid */ .demo-tops-grid .data-table th:nth-child(3), .demo-tops-grid .data-table td:nth-child(3) { text-align: center; } /* Tag de número de volumen junto al título de la serie */ .vol-tag { display: inline-block; margin-left: 4px; color: var(--text-faint); font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 400; letter-spacing: 0.02em; } /* Línea de meta debajo del título: año fundación, país, etc. */ .publisher-meta { font-size: var(--text-sm); color: var(--text-muted); margin: var(--space-2) 0 0; } .publisher-meta__placeholder { color: var(--text-faint); font-style: italic; } /* La página de publisher hereda toda la cosmética de demographic-page (descriptions, grid 2x2, stat cards, cross grid). Si en el futuro necesitamos algo distinto, se diferencia con .publisher-page. */ /* Badge "Discontinued" junto al título de la magazine */ .magazine-status { display: inline-block; margin-left: var(--space-3); padding: 3px 10px; border-radius: 99px; font-size: var(--text-xs); font-weight: 500; vertical-align: middle; letter-spacing: 0.02em; } .magazine-status--discontinued { background: var(--surface-2); color: var(--text-faint); border: 1px solid var(--border); } /* ============================================================ AÑADIR AL FINAL DE style.css Estilos específicos de la ficha /franchise/ (REEMPLAZA EL BLOQUE ANTERIOR DE FRANCHISE) ============================================================ */ /* ------------------------------------------------------------ HERO — solo título y subtítulos (recuadro va aparte) ------------------------------------------------------------ */ .franchise-hero { margin-bottom: var(--space-6); } .franchise-hero__title { font-size: 2.25rem; font-weight: 600; letter-spacing: -0.025em; color: var(--text); line-height: 1.1; margin: 0 0 var(--space-3); } @media (min-width: 768px) { .franchise-hero__title { font-size: 3.25rem; } } .franchise-hero__title-jp { font-size: var(--text-xl); color: var(--text-muted); font-weight: 400; margin: 0 0 var(--space-2); line-height: 1.4; } .franchise-hero__title-alt { font-size: var(--text-sm); color: var(--text-faint); font-style: italic; margin: 0; } /* ------------------------------------------------------------ OVERVIEW — 2 columnas: info box + (stats + chips) ------------------------------------------------------------ */ .franchise-overview { display: grid; grid-template-columns: 1fr; gap: var(--space-6); margin-bottom: var(--space-12); } @media (min-width: 900px) { .franchise-overview { grid-template-columns: 280px 1fr; gap: var(--space-8); align-items: start; } } /* Info box (izquierda) */ .franchise-info { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-4); } .franchise-info__list { margin: 0; display: flex; flex-direction: column; gap: var(--space-4); } .franchise-info__row { display: flex; flex-direction: column; gap: 2px; } .franchise-info__row dt { font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); margin: 0; } .franchise-info__row dd { font-size: var(--text-sm); color: var(--text); margin: 0; line-height: 1.4; } .franchise-info__row dd a { color: var(--text); text-decoration: none; border-bottom: 1px dotted var(--text-faint); transition: color var(--transition), border-color var(--transition); } .franchise-info__row dd a:hover { color: var(--accent); border-bottom-color: var(--accent); } /* Aggregates (derecha): stats + chips apilados */ .franchise-aggregates { display: flex; flex-direction: column; gap: var(--space-6); min-width: 0; } .franchise-stats { /* hereda .stats-grid existente; aquí podemos forzar columnas si hace falta */ grid-template-columns: repeat(2, 1fr); } @media (min-width: 600px) { .franchise-stats { grid-template-columns: repeat(4, 1fr); } } .franchise-stats .stat-card { align-items: center; text-align: center; } /* ------------------------------------------------------------ TIMELINE VERTICAL — 3 columnas (año | dot | contenido) ------------------------------------------------------------ */ .franchise-timeline-section { margin-bottom: var(--space-12); } .timeline { list-style: none; margin: 0; padding: 0; } .timeline__item { display: grid; grid-template-columns: 90px 28px 1fr; column-gap: var(--space-3); padding: var(--space-3) 0; align-items: start; } /* Año — columna 1 */ .timeline__year { font-family: var(--font-mono); font-size: var(--text-sm); font-weight: 500; color: var(--text-muted); line-height: 1.6; text-align: right; white-space: nowrap; padding-top: 5px; } /* Columna del dot — la línea vertical se pinta como background continuo en esta columna; el dot va centrado encima */ .timeline__dot-col { position: relative; align-self: stretch; display: flex; justify-content: center; } .timeline__dot-col::before { content: ''; position: absolute; top: calc(-1 * var(--space-3)); /* compensa padding-top del .timeline__item */ bottom: calc(-1 * var(--space-3)); /* compensa padding-bottom del .timeline__item */ left: 50%; width: 2px; background: var(--border); transform: translateX(-1px); z-index: 0; } /* En el primer item la línea no debe llegar arriba del dot, en el último no debe pasar de él */ .timeline__item:first-child .timeline__dot-col::before { top: 16px; } .timeline__item:last-child .timeline__dot-col::before { bottom: calc(100% - 28px); } .timeline__dot { width: 12px; height: 12px; border-radius: 50%; background: var(--bg); border: 2px solid var(--accent); margin-top: 10px; position: relative; z-index: 1; } /* Variantes de color por medio */ .timeline__item--manga .timeline__dot { border-color: #2A7A5A; } .timeline__item--anime .timeline__dot { border-color: #C0392B; } .timeline__item--light_novel .timeline__dot { border-color: #E8A838; } [data-theme="dark"] .timeline__item--manga .timeline__dot { border-color: #3DB87A; } [data-theme="dark"] .timeline__item--anime .timeline__dot { border-color: #E36B5C; } [data-theme="dark"] .timeline__item--light_novel .timeline__dot { border-color: #F5C45E; } /* Contenido — columna 3 */ .timeline__content { min-width: 0; } .timeline__title { font-size: var(--text-base); font-weight: 500; color: var(--text); margin: 0 0 4px; line-height: 1.3; } .timeline__title a { color: var(--text); text-decoration: none; transition: color var(--transition); } .timeline__title a:hover { color: var(--accent); } .timeline__meta { margin: 0; display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; font-size: var(--text-xs); } .timeline__media-label { color: var(--text-muted); } .timeline__sep { color: var(--text-faint); } .timeline__item--noyear .timeline__year { color: var(--text-faint); } /* ------------------------------------------------------------ Tab counter (sin cambios respecto a la versión anterior) ------------------------------------------------------------ */ .data-tab__count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; padding: 0 6px; margin-left: var(--space-1); background: var(--surface-2); border-radius: 99px; font-family: var(--font-mono); font-size: 11px; font-weight: 500; color: var(--text-faint); line-height: 1.6; } .data-tab--active .data-tab__count { background: var(--accent-dim); color: var(--accent); } /* ============================================================ AÑADIR AL FINAL DE style.css — REEMPLAZA EL BLOQUE ANTERIOR Estilos específicos de la ficha /manga/ ============================================================ */ /* ------------------------------------------------------------ SERIES SWITCHER ------------------------------------------------------------ */ .series-switcher { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); margin-bottom: var(--space-6); font-size: var(--text-sm); } .series-switcher__label { color: var(--text-muted); font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; margin-right: var(--space-2); } .series-switcher__chip { display: inline-block; padding: 4px 10px; background: var(--bg); border: 1px solid var(--border); border-radius: 99px; font-size: var(--text-xs); color: var(--text-muted); text-decoration: none; transition: all var(--transition); } .series-switcher__chip:hover { border-color: var(--accent); color: var(--accent); } .series-switcher__chip--active { background: var(--accent); border-color: var(--accent); color: var(--accent-text); font-weight: 500; } /* ------------------------------------------------------------ CABECERA — 2 columnas: contenido principal + info sidebar ------------------------------------------------------------ */ .manga-header { display: grid; grid-template-columns: 1fr; gap: var(--space-6); margin-bottom: var(--space-16); align-items: start; } @media (min-width: 900px) { .manga-header { grid-template-columns: 1fr 320px; gap: var(--space-8); } } /* Meta superior (MANGA · SINCE 1997) */ .manga-header__meta { font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); margin: 0 0 var(--space-2); } /* Título grande */ .manga-header__title { font-size: 3rem; font-weight: 600; letter-spacing: -0.025em; line-height: 1.05; color: var(--text); margin: 0; } @media (min-width: 1024px) { .manga-header__title { font-size: 4rem; } } .manga-header__title-jp { font-size: var(--text-xl); color: var(--text-muted); margin: var(--space-2) 0 0; } /* ------------------------------------------------------------ CIRCULATION BLOCK — recuadro oscuro con número grande ------------------------------------------------------------ */ .circulation-block { background: var(--accent-dim); border: 0px solid var(--accent); border-radius: var(--radius-lg); padding: var(--space-6) var(--space-6); margin-top: var(--space-4); } .circulation-block__label { font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); margin: 0 0 var(--space-2); } [data-theme="dark"] .circulation-block__label { color: var(--text-muted); } .circulation-block__big { font-family: var(--font-mono); font-size: 2.5rem; font-weight: 600; line-height: 1; color: var(--accent); letter-spacing: -0.02em; } .circulation-block__sub { font-family: var(--font-mono); font-size: var(--text-s); color: var(--accent); opacity: 0.7; margin: var(--space-2) 0 0; letter-spacing: 0.02em; } @media (min-width: 1024px) { .circulation-block__big { font-size: 3.25rem; } } /* ------------------------------------------------------------ BAR CHART de últimos 3 volúmenes con ejes ------------------------------------------------------------ */ .latest-vols { margin-top: var(--space-8); } .latest-vols__label { font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); margin: 0 0 var(--space-3); } .latest-vols__chart { display: grid; grid-template-columns: 70px 1fr; gap: var(--space-3); height: 220px; padding-bottom: var(--space-2); } .latest-vols__y-axis { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end; padding-right: var(--space-2); border-right: 1px solid var(--border); } .latest-vols__y-tick { font-family: var(--font-mono); font-size: 11px; color: var(--text-faint); line-height: 1; } .latest-vols__bars { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); border-bottom: 1px solid var(--border); padding-bottom: var(--space-2); } .latest-vols__col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; min-width: 0; } .latest-vols__bar-area { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; position: relative; } .latest-vols__value { font-family: var(--font-mono); font-size: var(--text-sm); font-weight: 600; color: var(--text); margin-bottom: var(--space-1); white-space: nowrap; } .latest-vols__bar { width: 70%; max-width: 80px; background: var(--accent); border-radius: 4px 4px 0 0; min-height: 4px; transition: height var(--transition); } .latest-vols__label-x { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-muted); margin-top: var(--space-2); grid-column: 1 / -1; } .latest-vols__note { font-size: var(--text-sm); color: var(--text-muted); font-style: italic; margin: var(--space-3) 0 0; } .latest-vols__desc { font-size: var(--text-xs); color: var(--text-faint); margin: var(--space-2) 0 0; line-height: 1.5; } /* ── Manga-only: projected next-volume card ── */ .latest-vols__projection { margin-top: var(--space-4); } /* ------------------------------------------------------------ INFO SIDEBAR (columna derecha del header) ------------------------------------------------------------ */ .manga-header__info-col { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-4); } .manga-header__about-label { font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); margin: 0 0 var(--space-4); padding-bottom: var(--space-3); border-bottom: 1px solid var(--border); } .info-list { margin: 0; display: flex; flex-direction: column; gap: var(--space-3); } .info-list__row { display: grid; grid-template-columns: 100px 1fr; gap: var(--space-3); align-items: baseline; padding-bottom: var(--space-3); border-bottom: 1px solid var(--border); } .info-list__row:last-child { padding-bottom: 0; border-bottom: none; } .info-list__row dt { font-size: var(--text-xs); font-weight: 600; color: var(--text-muted); margin: 0; } .info-list__row dd { font-size: var(--text-sm); color: var(--text); margin: 0; line-height: 1.4; } .info-list__row dd a { color: var(--accent); text-decoration: none; transition: color var(--transition); } .info-list__row dd a:hover { color: var(--accent-hover); text-decoration: underline; } .info-list__role { font-size: var(--text-xs); color: var(--text-faint); margin-left: 4px; } /* ------------------------------------------------------------ SECTION TITLES ------------------------------------------------------------ */ .manga-section-title { font-size: var(--text-xl); font-weight: 600; letter-spacing: -0.01em; color: var(--text); margin: 0 0 var(--space-4); } /* ------------------------------------------------------------ SALES REPORT — 5 highlight cards ------------------------------------------------------------ */ .highlight-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); margin-bottom: var(--space-6); } @media (min-width: 768px) { .highlight-grid { grid-template-columns: repeat(5, 1fr); } } .highlight-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); text-align: center; } .highlight-card__label { font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-faint); } .highlight-card__value { font-family: var(--font-mono); font-size: var(--text-2xl); font-weight: 600; color: var(--accent); letter-spacing: -0.02em; line-height: 1.1; } .highlight-card__value--muted { color: var(--text-faint); } .highlight-card__sub { font-size: var(--text-xs); color: var(--text-muted); line-height: 1.5; font-family: var(--font-mono); } /* ============================================================ SALES EVOLUTION — bar chart apilado ============================================================ */ .evolution-chart { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-4); } .evolution-chart__plot { display: grid; grid-template-columns: 70px 1fr; gap: var(--space-3); height: 380px; /* MUCHO más alto que antes (era 220) */ } .evolution-chart__y-axis { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end; padding-right: var(--space-2); padding-bottom: 32px; /* deja sitio para los labels X de las barras */ border-right: 1px solid var(--border); } .evolution-chart__y-tick { font-family: var(--font-mono); font-size: 11px; color: var(--text-faint); line-height: 1; } .evolution-chart__bars { display: flex; align-items: flex-end; gap: 4px; border-bottom: 1px solid var(--border); padding-bottom: var(--space-2); overflow-x: auto; } .evolution-chart__col { display: flex; flex-direction: column; align-items: center; flex: 1 0 32px; min-width: 32px; max-width: 50px; height: 100%; cursor: help; justify-content: flex-end; } .evolution-chart__bar-wrap { width: 100%; flex: 1; display: flex; flex-direction: column; justify-content: flex-end; } .evolution-chart__stack { width: 100%; display: flex; flex-direction: column-reverse; /* el primer hijo del DOM aparece abajo */ border-radius: 3px 3px 0 0; overflow: hidden; min-height: 2px; } .evolution-chart__seg { width: 100%; flex-shrink: 0; } /* ── PALETA de segments (fija — no cambia con el tema) ──────── */ .evolution-chart__seg--le { background: #C8C5BF; } .evolution-chart__seg--w0 { background: #8B7BC9; } .evolution-chart__seg--w1 { background: #100D3A; } .evolution-chart__seg--w2 { background: #EE6B4D; } .evolution-chart__seg--w3 { background: #457C9D; } .evolution-chart__seg--w4 { background: #C63A47; } .evolution-chart__seg--w5 { background: #82BC3F; } .evolution-chart__label { font-size: 10px; font-family: var(--font-mono); font-weight: 600; color: var(--text-muted); margin-top: var(--space-2); line-height: 1.2; } .evolution-chart__days { font-size: 9px; font-family: var(--font-mono); color: var(--text-faint); margin-top: 2px; line-height: 1.2; } .evolution-chart__legend { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-4); font-size: var(--text-xs); color: var(--text-muted); } .evolution-chart__legend-item { display: inline-flex; align-items: center; gap: 6px; } .evolution-chart__legend-dot { display: inline-block; width: 14px; height: 14px; border-radius: 3px; } /* ------------------------------------------------------------ LÍNEAS SEPARADORAS entre secciones Cualquier

lleva línea encima. ------------------------------------------------------------ */ .manga-section-title { font-size: var(--text-xl); font-weight: 600; letter-spacing: -0.01em; color: var(--text); border-top: 1px solid var(--border); margin: var(--space-12) 0 var(--space-4); /* mt-12 antes, mb-5 después */ padding-top: var(--space-8); /* respiración entre línea y texto */ } /* Las tablas históricas (data-tabs + circ-table-wrap) no tienen

propio, así que les damos su separadora con un wrapper. En tu HTML el bloque empieza directamente con
inmediatamente después del .highlight-grid de las 5 cards. Lo más limpio: que la franja superior la dé el data-tabs cuando está dentro de manga-page. */ /* Pegar las tabs a la tabla histórica para que la línea horizontal del data-tabs sirva visualmente de techo a la tabla, sin hueco. */ .manga-page .data-tabs { border-bottom: none; padding-bottom: 0; margin-top: var(--space-2); } .manga-page .circ-table-wrap { margin-top: 0; } .manga-page .circ-table-wrap .data-table { table-layout: fixed; } .manga-page .pagination { margin-bottom: var(--space-8); } .vol-edition { margin-left: 6px; font-style: italic; color: var(--text-faint); font-size: var(--text-xs); } @media (min-width: 768px) { .highlight-grid--4 { grid-template-columns: repeat(4, 1fr); } } @media (min-width: 768px) { .highlight-grid--3 { grid-template-columns: repeat(3, 1fr); } } .manga-page .series-switcher + .manga-section-title { margin-top: var(--space-8); } /* ============================================================ COMPARE — Bloque de estilos Añadir al final de assets/css/style.css ============================================================ */ /* ── Cabecera ── */ .compare-header { padding: var(--space-8) 0 var(--space-4); border-bottom: 1px solid var(--border); margin-bottom: var(--space-6); } .compare-title { font-size: var(--text-3xl); font-weight: 600; letter-spacing: -0.03em; line-height: 1.15; margin-bottom: var(--space-2); } .compare-subtitle { font-size: var(--text-base); color: var(--text-muted); } /* ── Selector de modo ── */ .compare-mode-bar { display: flex; gap: 0; border-bottom: 1px solid var(--border); margin-bottom: var(--space-6); } .cmode-btn { padding: var(--space-3) var(--space-6); font-size: var(--text-sm); font-weight: 500; color: var(--text-muted); background: transparent; border: none; border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; transition: color var(--transition), border-color var(--transition); } .cmode-btn:hover { color: var(--text); } .cmode-btn--active { color: var(--accent); border-bottom-color: var(--accent); } /* ── Paneles ── */ .compare-panel { display: none; } .compare-panel--active { display: block; } /* ── Controles ── */ .cmp-controls.card { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-4) var(--space-6); margin-bottom: var(--space-4); } /* ── Chips de ítems seleccionados ── */ .cmp-items { display: flex; flex-wrap: wrap; gap: var(--space-2); min-height: 36px; align-items: center; } .cmp-chip { display: inline-flex; align-items: center; gap: var(--space-2); padding: 5px 10px 5px 8px; border-radius: 99px; border: 1px solid var(--chip-color, var(--border)); background: color-mix(in srgb, var(--chip-color, var(--accent)) 10%, transparent); font-size: var(--text-sm); } .cmp-chip-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--chip-color, var(--accent)); flex-shrink: 0; } .cmp-chip-label { color: var(--text); } .cmp-chip-remove { display: flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; color: var(--text-muted); transition: background var(--transition), color var(--transition); } .cmp-chip-remove:hover { background: var(--surface-2); color: var(--text); } /* ── Botón añadir ── */ .cmp-add-btn { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border: 1px dashed var(--border-strong); border-radius: var(--radius-sm); font-size: var(--text-sm); color: var(--text-muted); transition: border-color var(--transition), color var(--transition), background var(--transition); align-self: flex-start; } .cmp-add-btn:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-dim); } /* ── Autocomplete ── */ .cmp-autocomplete-wrap { display: none; flex-direction: column; position: relative; max-width: 480px; } .cmp-ac-field { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-muted); } .cmp-ac-field:focus-within { border-color: var(--accent); color: var(--text); } .cmp-ac-input { flex: 1; border: none; background: transparent; font-family: var(--font); font-size: var(--text-sm); color: var(--text); outline: none; } .cmp-ac-input::placeholder { color: var(--text-faint); } .cmp-ac-list { position: absolute; top: calc(100% + 4px); left: 0; right: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 4px 12px rgba(0,0,0,0.08); z-index: 50; max-height: 280px; overflow-y: auto; } [data-theme="dark"] .cmp-ac-list { box-shadow: 0 4px 16px rgba(0,0,0,0.4); } .cmp-ac-item { display: flex; align-items: center; justify-content: space-between; padding: var(--space-3) var(--space-4); cursor: pointer; border-bottom: 1px solid var(--border); gap: var(--space-3); } .cmp-ac-item:last-child { border-bottom: none; } .cmp-ac-item:hover, .cmp-ac-item--active { background: var(--surface-2); } .cmp-ac-title { font-size: var(--text-sm); color: var(--text); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cmp-ac-meta { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; } .cmp-ac-circ, .cmp-ac-count { font-size: var(--text-xs); font-family: var(--font-mono); color: var(--text-faint); } /* ── Métricas ── */ .cmp-metric-row { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; } .cmp-metric-label { font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-faint); white-space: nowrap; min-width: 48px; } .cmp-metric-pills { display: flex; flex-wrap: wrap; gap: var(--space-2); } .cmp-pill { padding: 4px 14px; border-radius: 99px; font-size: var(--text-xs); border: 1px solid var(--border); color: var(--text-muted); background: transparent; cursor: pointer; transition: all var(--transition); } .cmp-pill:hover { border-color: var(--border-strong); color: var(--text); } .cmp-pill--active { background: var(--accent); border-color: var(--accent); color: var(--accent-text); } .cmp-pill--disabled { opacity: 0.38; cursor: not-allowed; } .cmp-pill--disabled:hover { border-color: var(--border); color: var(--text-muted); } .cmp-align-note { font-size: var(--text-xs); color: var(--text-muted); margin: var(--space-2) 0 0; padding: var(--space-2) var(--space-3); background: var(--surface-2); border-radius: var(--radius-sm); border-left: 3px solid var(--accent); } /* ── Type badges ── */ .cmp-type-badge { display: inline-block; padding: 2px 6px; border-radius: 4px; font-size: var(--text-xs); font-weight: 500; white-space: nowrap; } .cmp-type-badge--publisher { background: #E1F5EE; color: #0F6E56; } .cmp-type-badge--demographic { background: #EEEDFE; color: #3C3489; } .cmp-type-badge--magazine { background: #FAEEDA; color: #854F0B; } .cmp-type-badge--genre { background: #FAECE7; color: #993C1D; } .cmp-type-badge--manga { background: #E1F5EE; color: #0F6E56; } .cmp-type-badge--light_novel { background: #EEEDFE; color: #3C3489; } .cmp-type-badge--anime { background: #FAEEDA; color: #854F0B; } [data-theme="dark"] .cmp-type-badge--publisher { background: rgba(42,122,90,0.2); color: #3DB87A; } [data-theme="dark"] .cmp-type-badge--demographic { background: rgba(127,119,221,0.2); color: #AFA9EC; } [data-theme="dark"] .cmp-type-badge--magazine { background: rgba(239,159,39,0.2); color: #FAC775; } [data-theme="dark"] .cmp-type-badge--genre { background: rgba(216,90,48,0.2); color: #F0997B; } [data-theme="dark"] .cmp-type-badge--manga { background: rgba(42,122,90,0.2); color: #3DB87A; } [data-theme="dark"] .cmp-type-badge--light_novel { background: rgba(127,119,221,0.2); color: #AFA9EC; } [data-theme="dark"] .cmp-type-badge--anime { background: rgba(239,159,39,0.2); color: #FAC775; } /* ── Estado vacío ── */ .cmp-empty { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); padding: var(--space-16) var(--space-4); color: var(--text-faint); text-align: center; font-size: var(--text-sm); } /* ── Gráfico ── */ .cmp-chart-card.card { padding: var(--space-4) var(--space-6); margin-bottom: var(--space-4); } .cmp-chart-note { margin: var(--space-3) 0 0; font-size: var(--text-xs); color: var(--text-faint); line-height: 1.5; } .cmp-chart-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-4); } .cmp-chart-title { font-size: var(--text-sm); font-weight: 600; color: var(--text); } .cmp-chart-legend { display: flex; flex-wrap: wrap; gap: var(--space-4); } .cmp-legend-item { display: flex; align-items: center; gap: 6px; font-size: var(--text-xs); color: var(--text-muted); } .cmp-legend-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .cmp-chart-wrap { position: relative; height: 240px; } /* ── Cards de ítems ── */ .cmp-cards-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-4); margin-bottom: var(--space-4); } .cmp-item-card.card { padding: 0; overflow: hidden; } .cmp-item-card-header { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-4); border-bottom: 1px solid var(--border); border-top: 3px solid var(--border); /* se sobreescribe inline */ } .cmp-item-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; margin-top: 4px; } .cmp-item-title { font-size: var(--text-sm); font-weight: 600; color: var(--text); display: block; margin-bottom: 2px; } a.cmp-item-title:hover { color: var(--accent); } .cmp-item-meta { font-size: var(--text-xs); color: var(--text-muted); display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; } .cmp-item-stats { padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); } .cmp-stat-block {} .cmp-stat-label { font-size: var(--text-xs); color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 2px; } .cmp-stat-value { font-size: var(--text-xl); font-weight: 600; font-family: var(--font-mono); color: var(--text); letter-spacing: -0.02em; } .cmp-stat-sub { font-size: var(--text-xs); color: var(--text-muted); font-family: var(--font-mono); margin-top: 2px; } .cmp-minibar-wrap { margin-top: var(--space-2); } .cmp-minibar-bg { height: 3px; background: var(--surface-2); border-radius: 2px; } .cmp-minibar-fill { height: 3px; border-radius: 2px; transition: width 400ms ease; } .cmp-card-missing { padding: var(--space-3) var(--space-4); font-size: var(--text-xs); color: var(--text-muted); background: var(--surface-2); border-top: 1px solid var(--border); font-style: italic; } /* ── Disclaimer ── */ .cmp-disclaimer { display: flex; align-items: flex-start; gap: var(--space-2); padding: var(--space-3) var(--space-4); background: color-mix(in srgb, #EF9F27 8%, transparent); border: 1px solid #EF9F27; border-radius: var(--radius); font-size: var(--text-xs); color: var(--text-muted); margin-bottom: var(--space-4); } .cmp-disclaimer svg { flex-shrink: 0; color: #EF9F27; margin-top: 1px; } /* ── Intersección (modo entidad) ── */ .cmp-intersection { margin-top: var(--space-6); } .cmp-section-title { font-size: var(--text-base); font-weight: 600; color: var(--text); margin-bottom: var(--space-4); padding-bottom: var(--space-2); border-bottom: 1px solid var(--border); } .cmp-intersection-more { font-size: var(--text-xs); color: var(--text-faint); text-align: center; margin-top: var(--space-3); padding: var(--space-3); } /* ── Modo Medio ── */ .cmp-medium-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-4); margin-bottom: var(--space-4); } .cmp-medium-card.card { padding: var(--space-6, 1.25rem) var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); } .cmp-medium-badge { display: inline-flex; align-items: center; gap: var(--space-1); padding: 3px 10px; border-radius: 99px; font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.04em; align-self: flex-start; margin-bottom: var(--space-2); } .cmp-medium-badge--manga { background: var(--badge-on-bg); color: var(--badge-on-fg); } .cmp-medium-badge--ln { background: #EEEDFE; color: #3C3489; } .cmp-medium-badge--anime { background: #FAEEDA; color: #854F0B; } [data-theme="dark"] .cmp-medium-badge--ln { background: rgba(127,119,221,0.2); color: #AFA9EC; } [data-theme="dark"] .cmp-medium-badge--anime { background: rgba(239,159,39,0.2); color: #FAC775; } .cmp-medium-series { font-size: var(--text-xs); color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: var(--space-2); } .cmp-medium-num { font-size: var(--text-2xl); font-weight: 600; font-family: var(--font-mono); color: var(--text); letter-spacing: -0.02em; } .cmp-medium-num--na { color: var(--text-faint); } .cmp-medium-unit { font-size: var(--text-xs); color: var(--text-muted); } .cmp-medium-missing { font-size: var(--text-xs); color: var(--text-muted); font-style: italic; border-top: 1px solid var(--border); padding-top: var(--space-2); margin-top: var(--space-1); } /* ── Selector de año (modo medio) ── */ .cmp-year-range { display: flex; align-items: center; gap: var(--space-2); } .cmp-year-sep { font-size: var(--text-sm); color: var(--text-faint); } .cmp-year-range .filter-select { width: auto; min-width: 90px; } /* ── Loading ── */ .cmp-loading { color: var(--text-faint); font-size: var(--text-sm); padding: var(--space-8); text-align: center; } .cmp-medium-loading { color: var(--text-faint); font-size: var(--text-sm); } /* ── Mobile ── */ @media (max-width: 767px) { .compare-title { font-size: var(--text-2xl); } .cmode-btn { padding: var(--space-3) var(--space-4); } .cmp-controls.card { padding: var(--space-4); } .cmp-chart-wrap { height: 180px; } .cmp-cards-grid { grid-template-columns: 1fr; } .cmp-medium-grid { grid-template-columns: 1fr; } .cmp-metric-row { flex-direction: column; align-items: flex-start; } } /* ============================================================ SALES EVOLUTION PAGE — añadir al final de style.css (sustituye el bloque anterior si ya lo habías pegado) ============================================================ */ /* Cabecera de página */ .evo-page-title { font-size: var(--text-3xl); font-weight: 600; letter-spacing: -0.03em; line-height: 1.15; margin-bottom: var(--space-2); } .evo-page-sub { font-size: var(--text-base); color: var(--text-muted); margin-bottom: var(--space-6); } /* Barra de buscadores — dos en la misma línea */ .evo-search-bar { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); margin-bottom: var(--space-8); } /* Buscador */ .evo-search-form { position: relative; } .evo-ac-field { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-muted); transition: border-color var(--transition); } .evo-ac-field:focus-within { border-color: var(--accent); color: var(--text); } .evo-ac-input { flex: 1; border: none; background: transparent; font-family: var(--font); font-size: var(--text-sm); color: var(--text); outline: none; } .evo-ac-input::placeholder { color: var(--text-faint); } .evo-ac-list { position: absolute; top: calc(100% + 4px); left: 0; right: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 4px 12px rgba(0,0,0,0.08); z-index: 50; max-height: 260px; overflow-y: auto; list-style: none; padding: 0; margin: 0; } [data-theme="dark"] .evo-ac-list { box-shadow: 0 4px 16px rgba(0,0,0,0.4); } .evo-ac-item { display: flex; align-items: center; justify-content: space-between; padding: var(--space-3) var(--space-4); cursor: pointer; border-bottom: 1px solid var(--border); gap: var(--space-3); } .evo-ac-item:last-child { border-bottom: none; } .evo-ac-item:hover, .evo-ac-item--active { background: var(--surface-2); } .evo-ac-title { font-size: var(--text-sm); color: var(--text); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .evo-ac-meta { font-size: var(--text-xs); font-family: var(--font-mono); color: var(--text-faint); flex-shrink: 0; } /* Bloques de gráfico */ .evo-chart-block { margin-bottom: var(--space-8); } .evo-chart-block--empty { padding: var(--space-8) 0; } .evo-series-title { font-size: var(--text-xl); font-weight: 600; margin-bottom: var(--space-1); } .evo-chart-sub { font-size: var(--text-sm); margin-bottom: var(--space-4); } /* Divisor entre gráficos */ .evo-divider { border: none; border-top: 1px solid var(--border); margin: var(--space-8) 0; } /* ── Sales Evolution page — override mínimo ── */ .evolution-chart--page .evolution-chart__plot { height: 380px; padding-top: var(--space-2); } .evolution-chart--page .evolution-chart__bars { overflow-x: auto; -webkit-overflow-scrolling: touch; align-items: flex-end; padding-right: var(--space-4); /* width: max-content lo pone el contenido, el scroll lo gestiona el padre */ } .evolution-chart--page .evolution-chart__col { flex: 0 0 32px; /* ancho fijo, no crece ni encoge */ } .evo-days-row { display: flex; gap: 4px; margin-top: var(--space-2); overflow-x: auto; } .evo-days-cell { min-width: 32px; flex: 0 0 32px; text-align: center; font-size: var(--text-xs); font-family: var(--font-mono); color: var(--text-faint); } .evo-anime-marker-label { color: var(--accent); font-weight: 500; } @media (max-width: 767px) { .evo-search-bar { grid-template-columns: 1fr; } .evo-page-title { font-size: var(--text-2xl); } } /* === Compare · Cross-medium within franchise === */ .compare-cross-medium { margin-bottom: var(--space-8); } .compare-cross-medium__head { margin-bottom: var(--space-4); } .compare-cross-medium__heading { font-size: var(--text-lg); font-weight: 600; color: var(--text); margin: 0 0 var(--space-1); } .compare-cross-medium__sub { margin: 0; font-size: var(--text-sm); } .compare-cross-medium__search-wrap { position: relative; margin-bottom: var(--space-4); } .compare-cross-medium__input { width: 100%; padding: var(--space-2) var(--space-3); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); font-family: var(--font); font-size: var(--text-sm); transition: border-color var(--transition); } .compare-cross-medium__input:focus { outline: none; border-color: var(--accent); } .compare-cross-medium__results { position: absolute; top: calc(100% + 2px); left: 0; right: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 8px 24px rgba(0,0,0,0.12); z-index: 200; list-style: none; margin: 0; padding: var(--space-1) 0; max-height: 240px; overflow-y: auto; } [data-theme="dark"] .compare-cross-medium__results { box-shadow: 0 8px 24px rgba(0,0,0,0.4); } .compare-cross-medium__result-item { padding: var(--space-2) var(--space-4); font-size: var(--text-sm); color: var(--text); cursor: pointer; transition: background var(--transition); } .compare-cross-medium__result-item:hover, .compare-cross-medium__result-item--active { background: var(--surface-2); } .compare-cross-medium__result-item--empty { color: var(--text-faint); cursor: default; font-style: italic; } /* ============================================================ DISCOVER HUB & LANDING PAGES ============================================================ */ /* ── Shared more-link (also defined in home.css; duplicated here so hub pages load it without home.css) ── */ .more-link { color: var(--accent); font-weight: 500; font-size: var(--text-sm); text-decoration: none; white-space: nowrap; transition: color var(--transition); } .more-link:hover { color: var(--accent-hover); } /* ── Hub page wrapper ── */ .hub-page__header { margin-bottom: var(--space-8); } /* ── Global search ── */ .hub-search { position: relative; max-width: 520px; margin-bottom: var(--space-12); } .hub-search__input { width: 100%; padding: var(--space-3) var(--space-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); font-family: var(--font); font-size: var(--text-sm); transition: border-color var(--transition); } .hub-search__input::-webkit-search-cancel-button { display: none; } .hub-search__input:focus { outline: none; border-color: var(--accent); } .hub-search__results { position: absolute; top: calc(100% + 2px); left: 0; right: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 8px 24px rgba(0,0,0,0.12); z-index: 200; list-style: none; margin: 0; padding: var(--space-1) 0; max-height: 300px; overflow-y: auto; } [data-theme="dark"] .hub-search__results { box-shadow: 0 8px 24px rgba(0,0,0,0.4); } .hub-search__item { display: flex; align-items: center; justify-content: space-between; padding: var(--space-2) var(--space-4); font-size: var(--text-sm); color: var(--text); cursor: pointer; gap: var(--space-3); border-bottom: 1px solid var(--border); transition: background var(--transition); } .hub-search__item:last-child { border-bottom: none; } .hub-search__item:hover, .hub-search__item--active { background: var(--surface-2); } .hub-search__item--empty { color: var(--text-faint); font-style: italic; cursor: default; } .hub-search__item-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hub-search__item-meta { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; } .hub-search__item-count { font-size: var(--text-xs); font-family: var(--num); color: var(--text-faint); } .hub-search__item-type { font-size: var(--text-xs); font-weight: 500; padding: 1px 5px; border-radius: 3px; } .hub-search__item-type--demographic { background: var(--accent-dim); color: var(--accent); } .hub-search__item-type--publisher { background: #EEEDFE; color: #3C3489; } .hub-search__item-type--genre { background: #FAECE7; color: #993C1D; } .hub-search__item-type--magazine { background: #FAEEDA; color: #854F0B; } [data-theme="dark"] .hub-search__item-type--publisher { background: rgba(127,119,221,0.2); color: #AFA9EC; } [data-theme="dark"] .hub-search__item-type--genre { background: rgba(216,90,48,0.2); color: #F0997B; } [data-theme="dark"] .hub-search__item-type--magazine { background: rgba(239,159,39,0.2); color: #FAC775; } /* ── Hub sections ── */ .hub-section { margin-bottom: var(--space-12); } .hub-section__header { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-4); flex-wrap: wrap; } .hub-section__header h2 { margin: 0; font-size: var(--text-xl); font-weight: 600; color: var(--text); letter-spacing: -0.01em; } .hub-section__title-link { color: inherit; text-decoration: none; transition: color var(--transition); } .hub-section__title-link:hover { color: var(--accent); } /* ── Discover grids ── */ .discover-grid { display: grid; gap: var(--space-3); grid-template-columns: 1fr; } @media (min-width: 480px) { .discover-grid--4 { grid-template-columns: repeat(2, 1fr); } .discover-grid--6 { grid-template-columns: repeat(2, 1fr); } .discover-grid--8 { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 768px) { .discover-grid--4 { grid-template-columns: repeat(4, 1fr); } .discover-grid--6 { grid-template-columns: repeat(3, 1fr); } .discover-grid--8 { grid-template-columns: repeat(4, 1fr); } } @media (min-width: 1024px) { .discover-grid--6 { grid-template-columns: repeat(6, 1fr); } .discover-grid--8 { grid-template-columns: repeat(8, 1fr); } } /* ── Discover card ── */ .discover-card { display: block; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-4); text-decoration: none; transition: border-color var(--transition), background var(--transition); } .discover-card:hover { border-color: var(--accent); background: var(--surface-2); } .discover-card__dot { width: 10px; height: 10px; border-radius: 50%; margin-bottom: var(--space-2); } .discover-card__title { font-size: var(--text-sm); font-weight: 500; color: var(--text); line-height: 1.3; } .discover-card__sub { font-size: var(--text-xs); color: var(--text-muted); margin-top: var(--space-1); line-height: 1.4; } /* ── Market share stacked bar ── */ .hub-marketshare { margin-bottom: var(--space-6); } .hub-marketshare__bar { height: 32px; border-radius: var(--radius); overflow: hidden; display: flex; margin-bottom: var(--space-3); } .hub-marketshare__seg { height: 100%; } .hub-marketshare__legend { display: flex; flex-direction: column; gap: var(--space-2); } .hub-marketshare__legend-row { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; } .hub-marketshare__swatch { width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0; } .hub-marketshare__name { font-size: var(--text-sm); font-weight: 500; color: var(--text); min-width: 100px; } .hub-marketshare__value { font-size: var(--text-sm); color: var(--text-muted); flex: 1; } .hub-marketshare__pct { font-family: var(--num); font-size: var(--text-sm); font-weight: 500; color: var(--accent); } /* ── Horizontal bar chart (publishers, magazines) ── */ .hub-bar-chart { display: flex; flex-direction: column; gap: 4px; } .hub-bar-chart__row { display: flex; align-items: center; gap: var(--space-3); text-decoration: none; } .hub-bar-chart__row:hover .hub-bar-chart__fill { filter: brightness(1.12); } .hub-bar-chart__label { font-size: var(--text-sm); color: var(--text); width: 180px; flex-shrink: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hub-bar-chart__track { flex: 1; background: var(--surface-2); border-radius: 2px; height: 24px; overflow: hidden; } .hub-bar-chart__fill { display: block; height: 100%; background: var(--accent); transition: width 400ms ease; } .hub-bar-chart__value { font-family: var(--num); font-size: var(--text-sm); color: var(--text-muted); min-width: 60px; text-align: right; white-space: nowrap; } /* ── Rankings (genres top 10) ── */ .hub-ranking { display: flex; flex-direction: column; gap: var(--space-2); } .hub-ranking__row { display: flex; align-items: center; gap: var(--space-3); } .hub-ranking__num { font-family: var(--num); font-size: var(--text-sm); color: var(--text-faint); width: 20px; flex-shrink: 0; text-align: right; } .hub-ranking__name { font-size: var(--text-sm); color: var(--text); text-decoration: none; width: 160px; flex-shrink: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hub-ranking__name:hover { color: var(--accent); } .hub-ranking__bar { flex: 1; background: var(--surface-2); border-radius: 2px; height: 8px; overflow: hidden; } .hub-ranking__fill { display: block; height: 100%; background: var(--accent); } .hub-ranking__count { font-family: var(--num); font-size: var(--text-sm); color: var(--text-muted); min-width: 50px; text-align: right; } /* ── Demographic full cards ── */ .hub-detail-cards { display: grid; gap: var(--space-6); } @media (min-width: 768px) { .hub-detail-cards { grid-template-columns: repeat(2, 1fr); } } .hub-detail-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-5); display: flex; flex-direction: column; } .hub-detail-card__accent-bar { width: 36px; height: 4px; border-radius: 2px; margin-bottom: var(--space-3); } .hub-detail-card__name { font-size: var(--text-lg); font-weight: 600; color: var(--text); margin: 0 0 var(--space-1); } .hub-detail-card__desc { font-size: var(--text-sm); color: var(--text-muted); margin: 0 0 var(--space-4); line-height: 1.6; flex: 1; } .hub-detail-card__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); margin-bottom: var(--space-4); padding: var(--space-3) 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .hub-detail-card__stat-label { font-size: var(--text-xs); color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.07em; } .hub-detail-card__stat-value { font-size: var(--text-base); font-weight: 600; color: var(--text); font-family: var(--num); margin-top: 2px; } .hub-detail-card__top-series { margin-bottom: var(--space-4); } .hub-detail-card__top-series p { font-size: var(--text-xs); color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.07em; margin: 0 0 var(--space-2); } .hub-detail-card__series-item { font-size: var(--text-sm); padding: var(--space-1) 0; border-bottom: 1px dotted var(--border); } .hub-detail-card__series-item:last-child { border-bottom: none; } .hub-detail-card__series-item a { color: var(--text); text-decoration: none; } .hub-detail-card__series-item a:hover { color: var(--accent); } .hub-detail-card__footer { padding-top: var(--space-3); } .hub-detail-card__footer a { font-size: var(--text-sm); color: var(--accent); font-weight: 500; } /* ── Publisher big cards ── */ .hub-pub-cards { display: grid; gap: var(--space-6); } @media (min-width: 768px) { .hub-pub-cards { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .hub-pub-cards--six { grid-template-columns: repeat(3, 1fr); } } .hub-pub-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-5); } .hub-pub-card__header { margin-bottom: var(--space-3); } .hub-pub-card__name { font-size: var(--text-lg); font-weight: 600; color: var(--text); margin: 0 0 var(--space-1); } .hub-pub-card__jp { font-size: var(--text-sm); color: var(--text-muted); margin: 0 0 var(--space-3); } .hub-pub-card__desc { font-size: var(--text-sm); color: var(--text-muted); margin: 0 0 var(--space-4); line-height: 1.6; } .hub-pub-card__stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); margin-bottom: var(--space-4); padding: var(--space-3) 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .hub-pub-card__stat-label { font-size: var(--text-xs); color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.07em; } .hub-pub-card__stat-value { font-size: var(--text-base); font-weight: 600; color: var(--text); font-family: var(--num); margin-top: 2px; } .hub-pub-card__market-share { font-size: var(--text-sm); color: var(--text-muted); margin-bottom: var(--space-3); } .hub-pub-card__market-share strong { color: var(--accent); font-family: var(--num); } .hub-pub-card__series-item { font-size: var(--text-sm); padding: var(--space-1) 0; border-bottom: 1px dotted var(--border); } .hub-pub-card__series-item:last-child { border-bottom: none; } .hub-pub-card__series-item a { color: var(--text); text-decoration: none; } .hub-pub-card__series-item a:hover { color: var(--accent); } .hub-pub-card__footer { padding-top: var(--space-3); border-top: 1px solid var(--border); } .hub-pub-card__footer a { font-size: var(--text-sm); color: var(--accent); font-weight: 500; } /* ── Magazines by publisher ── */ .hub-pub-mag-grid { display: grid; gap: var(--space-4); } @media (min-width: 768px) { .hub-pub-mag-grid { grid-template-columns: repeat(2, 1fr); } } .hub-pub-mag-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-4); } .hub-pub-mag-card__header { margin-bottom: var(--space-3); } .hub-pub-mag-card__name { font-size: var(--text-base); font-weight: 500; color: var(--text); text-decoration: none; } .hub-pub-mag-card__name:hover { color: var(--accent); } .hub-pub-mag-card__count { font-size: var(--text-sm); color: var(--text-muted); margin-top: 2px; } .hub-pub-mag-card__chips { display: flex; flex-wrap: wrap; gap: var(--space-2); } /* ── Filters (browse-all) ── */ .hub-filters { display: flex; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-6); padding: var(--space-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); } .hub-filter-row { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; } .hub-filter-label { font-size: var(--text-xs); color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.08em; min-width: 52px; flex-shrink: 0; } .hub-letter-filter { display: flex; flex-wrap: wrap; gap: 2px; } .hub-letter-btn { padding: 2px 5px; font-size: var(--text-xs); font-family: var(--num); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-muted); background: transparent; cursor: pointer; transition: all var(--transition); text-decoration: none; } .hub-letter-btn:hover { border-color: var(--accent); color: var(--accent); } .hub-letter-btn--active { background: var(--accent); border-color: var(--accent); color: #fff; } .hub-sort-group { display: flex; gap: var(--space-1); } .hub-sort-btn { padding: var(--space-1) var(--space-3); font-size: var(--text-xs); border-radius: var(--radius-sm); border: 1px solid var(--border); color: var(--text-muted); background: transparent; cursor: pointer; transition: all var(--transition); text-decoration: none; } .hub-sort-btn:hover { border-color: var(--accent); color: var(--accent); } .hub-sort-btn--active { background: var(--accent-dim); border-color: var(--accent); color: var(--accent); font-weight: 500; } .hub-active-check { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--text-muted); cursor: pointer; } .hub-active-check input { accent-color: var(--accent); } /* ── Browse grid ── */ .hub-browse-grid { display: grid; gap: var(--space-2); grid-template-columns: repeat(2, 1fr); } @media (min-width: 640px) { .hub-browse-grid { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 768px) { .hub-browse-grid { grid-template-columns: repeat(4, 1fr); } } /* ── Genre category groups ── */ .hub-genre-categories { display: grid; gap: var(--space-6); grid-template-columns: 1fr; } @media (min-width: 768px) { .hub-genre-categories { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .hub-genre-categories { grid-template-columns: repeat(4, 1fr); } } .hub-genre-cat__title { font-size: var(--text-sm); font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: var(--space-3); } .hub-genre-cat__chips { display: flex; flex-direction: column; gap: var(--space-1); } /* ── Demo colors — fixed across themes ── */ .hub-demo--shounen { --demo-color: #2A7A5A; } .hub-demo--seinen { --demo-color: #457C9D; } .hub-demo--shoujo { --demo-color: #E8873A; } .hub-demo--josei { --demo-color: #C63A47; } .hub-demo--boys-love { --demo-color: #7F77DD; } .hub-demo--girls-love { --demo-color: #82BC3F; } /* ── Yearly chart wrapper ── */ .hub-chart-wrap { position: relative; height: 300px; margin-top: var(--space-4); } /* ── Misc note ── */ .hub-note { font-size: var(--text-xs); color: var(--text-faint); margin-top: var(--space-8); padding: var(--space-3) var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-sm); } .compare-cross-medium__result { margin-top: var(--space-2); } .compare-cross-medium__title { font-size: var(--text-base); font-weight: 600; color: var(--text); margin: 0 0 var(--space-3); } .compare-cross-medium__bar { height: 32px; border-radius: var(--radius); overflow: hidden; display: flex; margin-bottom: var(--space-4); } .compare-cross-medium__seg { height: 100%; transition: width 400ms ease; flex-shrink: 0; } /* Fixed colors — match franchise timeline dots — do not theme-switch */ .compare-cross-medium__seg--manga { background: #2A7A5A; } .compare-cross-medium__seg--ln { background: #E8A838; } .compare-cross-medium__seg--anime { background: #C0392B; } .compare-cross-medium__legend { display: flex; flex-direction: column; gap: var(--space-3); margin: 0 0 var(--space-4); padding: 0; } .compare-cross-medium__legend-row { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; } .compare-cross-medium__swatch { width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0; } .compare-cross-medium__medium-name { font-size: var(--text-sm); font-weight: 500; color: var(--text); min-width: 80px; } .compare-cross-medium__value { font-size: var(--text-sm); color: var(--text-muted); flex: 1; min-width: 0; } .compare-cross-medium__pct { font-family: var(--num); font-size: var(--text-sm); font-weight: 500; color: var(--accent); white-space: nowrap; } .compare-cross-medium__disclaimer { font-size: var(--text-xs); color: var(--text-muted); line-height: 1.5; margin: 0; } .compare-cross-medium__error { font-size: var(--text-sm); color: var(--text-muted); padding: var(--space-3) 0; margin: 0; } /* === Magazine serialization history — collapsible decades === */ .mag-decade { border-bottom: 1px solid var(--border); } .mag-decade:first-of-type { border-top: 1px solid var(--border); } .mag-decade__header { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-1); font-size: var(--text-base); font-weight: 500; color: var(--text); cursor: pointer; list-style: none; user-select: none; transition: color var(--transition); } .mag-decade__header::-webkit-details-marker { display: none; } .mag-decade__header::marker { display: none; } .mag-decade__header:hover { color: var(--accent); } .mag-decade__header::after { content: '›'; margin-left: auto; font-size: var(--text-base); color: var(--text-faint); transition: transform var(--transition); display: inline-block; } details[open] > .mag-decade__header::after { transform: rotate(90deg); } .mag-decade__count { font-size: var(--text-sm); font-weight: 400; } .mag-decade__timeline { padding-bottom: var(--space-4); } /* === Sales Rankings page (/sales/rankings) === */ .rnk-type-tabs { margin-bottom: var(--space-4); } .rnk-filters { display: flex; align-items: flex-end; flex-wrap: wrap; gap: var(--space-5); margin-bottom: var(--space-5); padding: var(--space-4) var(--space-5); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); } .rnk-filter-group { display: flex; flex-direction: column; gap: var(--space-1); } .rnk-filter-label { font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-faint); white-space: nowrap; } .rnk-medium-pills { display: flex; gap: var(--space-1); } .rnk-delta--up { color: var(--accent); font-weight: 600; } .rnk-delta--down { color: #C63A47; font-weight: 600; } [data-theme="dark"] .rnk-delta--down { color: #E36B5C; } .rnk-extra-note { font-size: var(--text-xs); margin-bottom: var(--space-3); } @media (max-width: 640px) { .rnk-type-tabs { overflow-x: auto; flex-wrap: nowrap; padding-bottom: var(--space-2); } .rnk-filters { flex-direction: column; align-items: stretch; } .rnk-filter-group { flex-direction: row; align-items: center; gap: var(--space-3); } .rnk-filter-label { min-width: 80px; } } /* === /year index and year pages === */ /* ── Index page ── */ .year-index { padding: var(--space-8) 0 var(--space-16); } .year-index__header { margin-bottom: var(--space-8); } .year-index__title { font-size: var(--text-3xl); font-weight: 700; color: var(--text); margin: 0 0 var(--space-2); } .year-index__sub { font-size: var(--text-sm); color: var(--text-muted); margin: 0; } .year-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: var(--space-3); } .year-card { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-5) var(--space-3); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); text-decoration: none; transition: all var(--transition); text-align: center; } .year-card:hover { border-color: var(--accent); background: var(--accent-dim); transform: translateY(-1px); } .year-card__year { font-family: var(--font-mono); font-size: var(--text-2xl); font-weight: 600; color: var(--text); line-height: 1; } .year-card:hover .year-card__year { color: var(--accent); } .year-card__stat { font-size: var(--text-xs); color: var(--text-muted); line-height: 1.4; } /* ── Year detail page ── */ .year-page { padding: var(--space-8) 0 var(--space-16); } .year-nav-back { margin-bottom: var(--space-4); } .year-nav-back a { font-size: var(--text-sm); color: var(--text-muted); text-decoration: none; transition: color var(--transition); } .year-nav-back a:hover { color: var(--accent); } .year-page__header { margin-bottom: var(--space-8); } .year-page__title { font-family: var(--font-mono); font-size: var(--text-3xl); font-weight: 700; color: var(--text); line-height: 1; margin: 0 0 var(--space-2); } .year-page__sub { font-size: var(--text-sm); color: var(--text-muted); margin: 0; } .year-block { margin-bottom: var(--space-6); } .year-top-split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); margin-top: var(--space-5); } .year-block__sub-title { font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-faint); margin: 0 0 var(--space-3); padding-left: var(--space-2); } @media (max-width: 640px) { .year-top-split { grid-template-columns: 1fr; gap: var(--space-6); } .year-grid { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); } } /* ------------------------------------------------------------ PUBLIC FORMS (Contact, Report bug) ------------------------------------------------------------ */ /* Push the page title down from the nav */ .public-form-page { padding-top: var(--space-8); } .public-form { max-width: 640px; margin: 0 auto; padding-bottom: var(--space-16); } .public-form__group { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-5); } .public-form__label { font-size: var(--text-sm); font-weight: 600; color: var(--text); } .form-required { color: var(--accent); } .public-form__input, .public-form__select, .public-form__textarea { padding: var(--space-3) var(--space-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); font-family: var(--font); font-size: var(--text-base); transition: border-color var(--transition); width: 100%; box-sizing: border-box; } .public-form__input:focus, .public-form__select:focus, .public-form__textarea:focus { outline: none; border-color: var(--accent); } .public-form__textarea { min-height: 300px; resize: vertical; line-height: 1.6; } .public-form__submit { display: block; width: 100%; padding: var(--space-4) var(--space-6); background: var(--accent); color: #fff; border: none; border-radius: var(--radius-sm); font-size: var(--text-base); font-weight: 600; cursor: pointer; transition: background var(--transition); margin-top: var(--space-2); text-align: center; } .public-form__submit:hover { background: var(--accent-hover); } .form-alert { padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); font-size: var(--text-sm); margin-bottom: var(--space-6); border: 1px solid transparent; } .form-alert--success { background: rgba(42, 122, 90, 0.08); border-color: rgba(42, 122, 90, 0.3); color: var(--accent); } .form-alert--error { background: rgba(192, 57, 43, 0.08); border-color: rgba(192, 57, 43, 0.3); color: #C0392B; } [data-theme="dark"] .form-alert--error { color: #E57368; } /* ── Find us elsewhere (contact page) ── */ .contact-elsewhere { margin-top: var(--space-12); text-align: center; } /* Narrow centred separator */ .contact-elsewhere::before { content: ''; display: block; width: 60px; height: 1px; background: var(--border); margin: 0 auto var(--space-8); } .contact-elsewhere__title { font-size: var(--text-base); font-weight: 600; color: var(--text); margin: 0 0 var(--space-5); } .contact-elsewhere__list { display: flex; flex-direction: row; justify-content: center; flex-wrap: wrap; gap: var(--space-3); } .contact-elsewhere__link { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-5); font-size: var(--text-sm); font-weight: 500; color: var(--text-muted); text-decoration: none; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); transition: border-color var(--transition), color var(--transition), background var(--transition); } .contact-elsewhere__link:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-dim); } /* === Author detail page (/authors/) === */ .author-page { padding-top: var(--space-8); padding-bottom: var(--space-16); } .author-section { margin-top: var(--space-12); } .author-section > h2 { font-size: var(--text-xl); font-weight: 600; color: var(--text); margin: 0 0 var(--space-6); padding-bottom: var(--space-3); border-bottom: 1px solid var(--border); } /* ── Hero ── */ .author-hero { display: grid; grid-template-columns: 160px 1fr; gap: var(--space-8); align-items: center; margin-top: var(--space-8); margin-bottom: var(--space-8); } .author-circle { width: 160px; height: 160px; border-radius: 50%; background: var(--surface-2); border: 1px solid var(--border); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; flex-shrink: 0; } .author-circle__jp { font-family: 'Noto Serif JP', 'Hiragino Mincho ProN', 'Yu Mincho', serif; font-size: var(--text-base); font-weight: 600; color: var(--text-muted); line-height: 1.2; text-align: center; white-space: nowrap; } .author-circle__initials { font-size: var(--text-2xl); font-weight: 600; color: var(--text-muted); letter-spacing: -0.02em; } .author-hero__info { display: flex; flex-direction: column; gap: var(--space-2); } .author-h1 { font-size: var(--text-3xl); font-weight: 700; letter-spacing: -0.03em; color: var(--text); line-height: 1.15; margin: 0; } .author-subtitle { font-size: var(--text-sm); color: var(--text-muted); margin: 0; } .author-role-line { font-size: var(--text-sm); color: var(--text-faint); margin: 0; } .author-description { font-size: var(--text-sm); color: var(--text-muted); line-height: 1.6; margin: var(--space-2) 0 0; max-width: 65ch; } /* ── Stats grid override (4-col specific to author) ── */ .author-stats-grid { margin-bottom: var(--space-8); } /* ── Status badges ── */ .author-status-badge { display: inline-block; padding: 2px 8px; border-radius: 99px; font-size: var(--text-xs); font-weight: 600; } .author-status-badge--active { background: var(--badge-on-bg); color: var(--badge-on-fg); } .author-status-badge--inactive { background: var(--accent-dim); color: var(--accent); } .author-status-badge--retired { background: var(--badge-fin-bg); color: var(--badge-fin-fg); } .author-status-badge--deceased { background: var(--surface-2); color: var(--text-faint); } /* ── Timeline overrides for debut / death dots ── */ .timeline__item--debut .timeline__dot { border-color: var(--accent); background: var(--accent); } .timeline__item--death .timeline__dot { border-color: var(--text-faint); background: var(--text-faint); } /* ── Works tabs ── */ .author-section .data-tabs { display: flex; gap: var(--space-2); margin-bottom: var(--space-4); border-bottom: 1px solid var(--border); padding-bottom: var(--space-1); } .author-section .data-tab { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-4); border-radius: var(--radius-sm) var(--radius-sm) 0 0; font-size: var(--text-sm); font-weight: 500; color: var(--text-muted); border: 1px solid transparent; border-bottom: none; position: relative; bottom: -1px; text-decoration: none; transition: color var(--transition); } .author-section .data-tab:hover { color: var(--text); } .author-section .data-tab--active { color: var(--accent); background: var(--bg); border-color: var(--border); border-bottom-color: var(--bg); } .author-section .data-tab__count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 18px; padding: 0 5px; border-radius: 99px; font-size: var(--text-xs); font-weight: 600; background: var(--accent-dim); color: var(--accent); } /* ── Share of career bar ── */ .author-share-bar { border-radius: var(--radius-sm); overflow: hidden; height: 24px; display: flex; margin-bottom: var(--space-5); } .author-share-bar__seg { height: 100%; transition: opacity var(--transition); } .author-share-bar__seg:hover { opacity: 0.75; } .author-share-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); } .author-share-legend__item { display: grid; grid-template-columns: 12px 1fr auto auto; align-items: center; gap: var(--space-2); font-size: var(--text-xs); } .author-share-legend__dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; } .author-share-legend__title { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .author-share-legend__circ { font-family: var(--font-mono); color: var(--text-muted); white-space: nowrap; } .author-share-legend__pct { font-family: var(--font-mono); color: var(--text-faint); white-space: nowrap; min-width: 3.5ch; text-align: right; } /* ── Two-column block ── */ .author-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); margin-top: var(--space-12); align-items: start; } .author-two-col > section > h3 { font-size: var(--text-lg); font-weight: 600; color: var(--text); margin: 0 0 var(--space-2); } .author-chip-subhead { font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-faint); margin: 0 0 var(--space-2); } .author-chip-list { display: flex; flex-wrap: wrap; gap: var(--space-2); } /* ── Relations ── */ .author-relations-groups { display: flex; flex-direction: column; gap: var(--space-6); } .author-relations-group__label { font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-faint); margin: 0 0 var(--space-3); } .author-rel-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); } .author-rel-chip { display: flex; flex-direction: column; gap: 2px; padding: var(--space-2) var(--space-3); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); text-decoration: none; transition: border-color var(--transition), background var(--transition); max-width: 200px; } .author-rel-chip:hover { border-color: var(--accent); background: var(--accent-dim); } .author-rel-chip__name { font-size: var(--text-sm); font-weight: 500; color: var(--text); } .author-rel-chip__work { font-size: var(--text-xs); color: var(--text-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ── Mini lineage preview ── */ .author-lineage-preview { margin-top: var(--space-8); display: flex; flex-direction: column; align-items: center; gap: var(--space-3); padding: var(--space-6); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); } .lineage-preview__label { font-size: var(--text-xs); color: var(--text-faint); text-align: center; margin: 0; } .lineage-preview__row { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); } .lineage-preview__connector{ width: 1px; height: 20px; background: var(--border); } .lineage-preview__self { padding: var(--space-2) var(--space-5); border: 2px solid var(--accent); border-radius: 99px; font-weight: 700; color: var(--accent); font-size: var(--text-sm); } .lineage-preview__chip { padding: var(--space-1) var(--space-3); background: var(--surface-2); border: 1px solid var(--border); border-radius: 99px; font-size: var(--text-xs); color: var(--text-muted); text-decoration: none; transition: all var(--transition); } .lineage-preview__chip:hover { border-color: var(--accent); color: var(--accent); } .lineage-preview__link { font-size: var(--text-xs); color: var(--accent); text-decoration: none; } .lineage-preview__link:hover { text-decoration: underline; } /* ── Anime adaptations ── */ .author-anime-list { display: flex; flex-direction: column; gap: var(--space-3); } .author-anime-item { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-3) var(--space-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); } .author-anime-item__title { flex: 1; font-weight: 500; font-size: var(--text-sm); color: var(--text); text-decoration: none; transition: color var(--transition); } .author-anime-item__title:hover { color: var(--accent); } .author-anime-item__meta { font-size: var(--text-xs); color: var(--text-faint); display: flex; align-items: center; gap: var(--space-3); flex-shrink: 0; } /* ── Contemporaries ── */ .author-contemporaries { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); } .author-contemporary-card { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-3) var(--space-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); text-decoration: none; transition: border-color var(--transition), background var(--transition); } .author-contemporary-card:hover { border-color: var(--accent); background: var(--accent-dim); } .author-contemporary-card__name { font-size: var(--text-sm); font-weight: 600; color: var(--text); } .author-contemporary-card__work { font-size: var(--text-xs); color: var(--text-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ── External links ── */ .author-external-links { display: flex; flex-wrap: wrap; gap: var(--space-3); } .author-ext-link { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: var(--text-sm); color: var(--text-muted); text-decoration: none; transition: all var(--transition); } .author-ext-link:hover { border-color: var(--accent); color: var(--accent); } /* ── Responsive ── */ @media (max-width: 768px) { .author-hero { grid-template-columns: 1fr; } .author-circle { margin: 0 auto; } .author-two-col { grid-template-columns: 1fr; gap: var(--space-8); } .author-contemporaries { grid-template-columns: repeat(2, 1fr); } .author-anime-item { flex-wrap: wrap; } .author-anime-item__meta { flex-wrap: wrap; } } @media (max-width: 480px) { .author-contemporaries { grid-template-columns: 1fr; } } /* === About This Project page === */ .about-page { max-width: 720px; margin: var(--space-16) auto; padding: 0 var(--space-4); } .about-page h1 { font-size: var(--text-3xl); font-weight: 700; color: var(--text); margin-bottom: var(--space-12); line-height: 1.2; } .about-page h2 { font-size: var(--text-lg); font-weight: 600; color: var(--text); border-bottom: 1px solid var(--border); padding-bottom: var(--space-2); margin-top: var(--space-16); margin-bottom: var(--space-5); } .about-page h3 { font-size: var(--text-base); font-weight: 600; color: var(--text); margin-top: var(--space-8); margin-bottom: var(--space-3); } .about-page p { color: var(--text); line-height: 1.7; margin-bottom: var(--space-5); } .about-page ul, .about-page ol { padding-left: 1.5em; margin-bottom: var(--space-5); color: var(--text); line-height: 1.7; } .about-page li { margin-bottom: var(--space-3); } .about-page code { background: var(--surface-2); padding: 2px 6px; border-radius: var(--radius-sm); font-family: 'JetBrains Mono', monospace; font-size: 0.875em; color: var(--text); } .about-page strong { color: var(--text); font-weight: 600; } .about-page hr { border: none; border-top: 1px solid var(--border); margin: var(--space-16) 0 var(--space-8); } .about-page .last-updated { color: var(--text-muted); font-size: var(--text-sm); text-align: right; font-style: italic; margin: 0; } @media (max-width: 768px) { .about-page { margin: var(--space-8) auto; } .about-page h1 { font-size: var(--text-2xl); } .about-page h2 { margin-top: var(--space-12); } } /* ------------------------------------------------------------ DISCOVER — CIRCULATION ------------------------------------------------------------ */ /* ── Autocomplete widget (series search, first-print filter, magazine) ── */ .circ-ac-wrap { position: relative; max-width: 480px; } .circ-ac-field { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); transition: border-color var(--transition); } .circ-ac-field:focus-within { border-color: var(--accent); } .circ-ac-input { flex: 1; border: none; background: transparent; font-family: var(--font); font-size: var(--text-sm); color: var(--text); outline: none; min-width: 0; } .circ-ac-input::placeholder { color: var(--text-faint); } .circ-ac-clear { flex-shrink: 0; color: var(--text-faint); font-size: var(--text-base); line-height: 1; text-decoration: none; padding: 2px 4px; border-radius: 50%; transition: color var(--transition), background var(--transition); } .circ-ac-clear:hover { color: var(--text); background: var(--surface-2); } .circ-ac-dropdown { position: absolute; top: calc(100% + 4px); left: 0; right: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 4px 16px rgba(0,0,0,0.1); z-index: 100; list-style: none; margin: 0; padding: var(--space-1) 0; max-height: 280px; overflow-y: auto; } [data-theme="dark"] .circ-ac-dropdown { box-shadow: 0 4px 16px rgba(0,0,0,0.4); } .circ-ac-item { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-2) var(--space-4); cursor: pointer; border-bottom: 1px solid var(--border); transition: background var(--transition); } .circ-ac-item:last-child { border-bottom: none; } .circ-ac-item:hover { background: var(--surface-2); } .circ-ac-title { font-size: var(--text-sm); color: var(--text); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .circ-ac-meta { font-size: var(--text-xs); color: var(--text-faint); flex-shrink: 0; } /* ── Search results fallback list (shown when ?q= but no series selected) ── */ .circ-search-results { list-style: none; margin: var(--space-3) 0 0; padding: 0; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); max-width: 480px; } .circ-search-result-link { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-4); text-decoration: none; color: var(--text); border-bottom: 1px solid var(--border); transition: background var(--transition); } .circ-search-results li:last-child .circ-search-result-link { border-bottom: none; } .circ-search-result-link:hover { background: var(--surface-2); } .circ-search-result-title { font-size: var(--text-sm); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .circ-search-result-meta { font-size: var(--text-xs); color: var(--text-faint); flex-shrink: 0; } /* ── Magazine pills ── */ .circ-mag-pills { display: flex; flex-wrap: wrap; gap: var(--space-2); min-height: var(--space-6); } .circ-mag-pill { display: inline-flex; align-items: center; gap: var(--space-1); padding: 3px var(--space-2) 3px var(--space-3); background: var(--accent-dim); color: var(--accent); border: 1px solid var(--accent); border-radius: 99px; font-size: var(--text-xs); font-weight: 500; } .circ-mag-pill button { background: none; border: none; cursor: pointer; color: var(--accent); font-size: var(--text-sm); line-height: 1; padding: 0 2px; opacity: 0.7; } .circ-mag-pill button:hover { opacity: 1; } /* ── Growth / magazine chart container — full width, fixed height ── */ .circ-chart-wrap { position: relative; width: 100%; height: 380px; } @media (max-width: 767px) { .circ-chart-wrap { height: 240px; } } /* ── Section 5: Compare preset buttons ── */ .circ-preset-form { margin-bottom: var(--space-2); } .circ-preset-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); } .circ-preset-custom { display: flex; align-items: center; gap: var(--space-1); } .circ-preset-input { width: 72px; padding: var(--space-2) var(--space-3); font-size: var(--text-sm); text-align: center; } .circ-preset-go { padding: var(--space-2) var(--space-3); background: var(--surface-2); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: var(--text-sm); cursor: pointer; transition: background var(--transition), border-color var(--transition); } .circ-preset-go:hover { background: var(--surface); border-color: var(--accent); } /* ── Section 6: Magazine selector ── */ .circ-mag-form { margin-bottom: var(--space-4); } .circ-mag-selector-row { display: flex; align-items: flex-start; gap: var(--space-3); flex-wrap: wrap; } .circ-mag-select { min-width: 260px; max-width: 420px; font-size: var(--text-sm); background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); padding: var(--space-1); } .circ-mag-select:focus { outline: none; border-color: var(--accent); } .circ-mag-select option { padding: var(--space-1) var(--space-2); } .circ-mag-apply-btn { padding: var(--space-2) var(--space-4); background: var(--accent); color: #fff; border: none; border-radius: var(--radius-sm); font-size: var(--text-sm); font-weight: 500; cursor: pointer; white-space: nowrap; transition: background var(--transition); align-self: flex-end; } .circ-mag-apply-btn:hover { background: var(--accent-hover); } /* ── Section 7: Decade cards ── */ .circ-decade-grid { margin-bottom: var(--space-4); } .circ-decade-card { display: flex; flex-direction: column; gap: var(--space-1); text-align: left; cursor: pointer; border: 1px solid var(--border); background: var(--surface); border-radius: var(--radius-lg); padding: var(--space-6); transition: background var(--transition), border-color var(--transition); position: relative; } .circ-decade-card:hover { background: var(--surface-2); border-color: var(--accent); } .circ-decade-card--active { border-color: var(--accent); background: var(--surface-2); } .circ-decade-label { font-size: var(--text-2xl); font-weight: 600; font-family: var(--font-mono); color: var(--text); letter-spacing: -0.02em; } .circ-decade-pts { font-size: var(--text-xs); color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.05em; } .circ-decade-top { font-size: var(--text-sm); color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: var(--space-2); } .circ-decade-caret { position: absolute; bottom: var(--space-3); right: var(--space-4); font-size: var(--text-sm); color: var(--text-faint); transition: transform var(--transition); } .circ-decade-card--active .circ-decade-caret { transform: rotate(180deg); } /* ── Decade detail panel ── */ .circ-decade-detail { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); padding: var(--space-6); margin-bottom: var(--space-4); } .circ-decade-detail__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-6); } .circ-decade-detail__title { font-size: var(--text-xl); font-weight: 600; color: var(--text); margin: 0; } .circ-decade-close { background: none; border: 1px solid var(--border); border-radius: 50%; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; font-size: var(--text-base); color: var(--text-muted); cursor: pointer; line-height: 1; transition: background var(--transition), color var(--transition); } .circ-decade-close:hover { background: var(--surface-2); color: var(--text); } .circ-decade-detail__block { margin-bottom: var(--space-6); } .circ-decade-detail__block:last-child { margin-bottom: 0; } .circ-decade-detail__sub { font-size: var(--text-sm); font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; margin: 0 0 var(--space-3); } /* ── Screen-reader only helper ── */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* ── Mobile adjustments ── */ @media (max-width: 767px) { .circ-search-wrap { flex-direction: column; align-items: stretch; } .circ-search-wrap .hub-search__input { max-width: 100% !important; } .circ-preset-row { gap: var(--space-1); } .circ-mag-selector-row { flex-direction: column; } .circ-mag-select { min-width: 0; width: 100%; max-width: 100%; } .circ-decade-detail { padding: var(--space-4); } }