/* ============================================================ * Plataforma de libros 路 estilos principales * Toda la paleta vive en CSS vars. data-theme="dark" en * controla el modo claro/oscuro. * ============================================================ */ :root { --max-w: 1400px; --content-w: 720px; --sidebar-w: 280px; --toc-w: 240px; --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-mono: ui-monospace, "SF Mono", Menlo, monospace; --color-bg: #ffffff; --color-bg-elev: #ffffff; --color-surface: #f8fafc; --color-text: #0f172a; --color-text-soft: #475569; --color-border: #e2e8f0; --color-link: #2563eb; --color-input-bg: #f8fafc; --color-code-bg: #0f172a; --color-code-text: #e2e8f0; --capa-intuicion-border: #f59e0b; --capa-intuicion-bg: #fffbeb; --capa-intuicion-title: #92400e; --capa-fundamento-border: #3b82f6; --capa-fundamento-bg: #eff6ff; --capa-fundamento-title: #1e40af; --capa-aplicado-border: #10b981; --capa-aplicado-bg: #ecfdf5; --capa-aplicado-title: #065f46; --capa-ejemplo-border: #8b5cf6; --capa-ejemplo-bg: #f5f3ff; --capa-ejemplo-title: #5b21b6; --capa-ejercicio-border: #ec4899; --capa-ejercicio-bg: #fdf2f8; --capa-ejercicio-title: #9d174d; --capa-trampa-border: #ef4444; --capa-trampa-bg: #fef2f2; --capa-trampa-title: #991b1b; --capa-historia-border: #6b7280; --capa-historia-bg: #f9fafb; --capa-historia-title: #374151; --capa-proyecto-border: #0891b2; --capa-proyecto-bg: #ecfeff; --capa-proyecto-title: #155e75; --ad-fallback-bg: #f1f5f9; --ad-fallback-text: #475569; --ad-fallback-border: #cbd5e1; } :root[data-theme="dark"] { --color-bg: #0b1220; --color-bg-elev: #0f172a; --color-surface: #111827; --color-text: #e2e8f0; --color-text-soft: #94a3b8; --color-border: #1e293b; --color-link: #93c5fd; --color-input-bg: #1f2937; --color-code-bg: #020617; --color-code-text: #e2e8f0; --capa-intuicion-border: #d97706; --capa-intuicion-bg: #1c1408; --capa-intuicion-title: #fcd34d; --capa-fundamento-border: #2563eb; --capa-fundamento-bg: #0a1628; --capa-fundamento-title: #93c5fd; --capa-aplicado-border: #059669; --capa-aplicado-bg: #042f1e; --capa-aplicado-title: #6ee7b7; --capa-ejemplo-border: #7c3aed; --capa-ejemplo-bg: #1a0d2e; --capa-ejemplo-title: #c4b5fd; --capa-ejercicio-border: #db2777; --capa-ejercicio-bg: #2d0a1f; --capa-ejercicio-title: #f9a8d4; --capa-trampa-border: #dc2626; --capa-trampa-bg: #2c0a0a; --capa-trampa-title: #fca5a5; --capa-historia-border: #4b5563; --capa-historia-bg: #111827; --capa-historia-title: #d1d5db; --capa-proyecto-border: #0e7490; --capa-proyecto-bg: #042e36; --capa-proyecto-title: #67e8f9; --ad-fallback-bg: #111827; --ad-fallback-text: #94a3b8; --ad-fallback-border: #1e293b; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: var(--font-body); font-size: 17px; line-height: 1.6; color: var(--color-text); background: var(--color-bg); -webkit-font-smoothing: antialiased; transition: background-color 0.2s ease, color 0.2s ease; } a { color: var(--color-link); } code { font-family: var(--font-mono); font-size: 0.92em; } .muted { color: var(--color-text-soft); } /* ============================================================ * Header / nav * ============================================================ */ .site-header { border-bottom: 1px solid var(--color-border); position: sticky; top: 0; z-index: 50; backdrop-filter: saturate(180%) blur(8px); background: color-mix(in srgb, var(--color-bg) 85%, transparent); } .site-header__inner { max-width: var(--max-w); margin: 0 auto; padding: 12px 24px; display: flex; align-items: center; gap: 16px; } .brand { font-weight: 700; font-size: 16px; text-decoration: none; color: var(--color-text); letter-spacing: -0.01em; } .brand__sub { color: var(--color-text-soft); font-weight: 500; font-size: 14px; margin-left: 6px; } .site-nav { display: flex; gap: 16px; font-size: 14px; } .site-nav a { color: var(--color-text-soft); text-decoration: none; padding: 6px 0; } .site-nav a:hover { color: var(--color-text); } .search { margin-left: auto; flex: 0 1 280px; position: relative; } .search input { width: 100%; padding: 6px 12px; border: 1px solid var(--color-border); border-radius: 6px; font-size: 14px; background: var(--color-input-bg); color: var(--color-text); } .search-results { position: absolute; top: 100%; left: 0; right: 0; margin-top: 4px; background: var(--color-bg-elev); border: 1px solid var(--color-border); border-radius: 6px; box-shadow: 0 8px 24px rgba(0,0,0,0.08); max-height: 70vh; overflow-y: auto; z-index: 100; } .search-results__item { display: block; padding: 10px 14px; text-decoration: none; color: var(--color-text); border-bottom: 1px solid var(--color-border); } .search-results__item:last-child { border-bottom: 0; } .search-results__item:hover { background: var(--color-surface); } .search-results__title { font-weight: 600; font-size: 14px; } .search-results__sub { font-size: 12px; color: var(--color-text-soft); margin-top: 2px; } .search-results__empty { padding: 14px; color: var(--color-text-soft); font-size: 14px; text-align: center; } .btn { padding: 6px 12px; border: 1px solid var(--color-border); background: var(--color-bg-elev); border-radius: 6px; font-size: 14px; text-decoration: none; color: var(--color-text); cursor: pointer; font-family: inherit; display: inline-flex; align-items: center; justify-content: center; } .btn--primary { background: var(--color-text); color: var(--color-bg); border-color: var(--color-text); } .btn--icon { width: 36px; height: 36px; padding: 0; font-size: 16px; } .btn--danger { background: #dc2626; color: white; border-color: #dc2626; } /* ============================================================ * Home * ============================================================ */ .home { max-width: var(--max-w); margin: 0 auto; padding: 48px 24px; } .hero { text-align: center; padding: 24px 0 48px; max-width: 720px; margin: 0 auto; } .hero h1 { font-size: 36px; line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 16px; } .hero__lead { font-size: 17px; color: var(--color-text-soft); margin: 0; } .section-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; gap: 16px; flex-wrap: wrap; } .section-head h2 { font-size: 22px; margin: 0; } .filter-bar { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--color-text-soft); } .filter-bar select { padding: 6px 10px; border: 1px solid var(--color-border); border-radius: 6px; background: var(--color-input-bg); color: var(--color-text); font-size: 14px; font-family: inherit; } .book-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; } .book-card { display: block; text-decoration: none; color: var(--color-text); border: 1px solid var(--color-border); background: var(--color-bg-elev); border-radius: 12px; padding: 20px; transition: transform 0.15s ease, border-color 0.15s ease; } .book-card:hover { transform: translateY(-2px); border-color: var(--color-link); } .book-card__title { font-size: 18px; font-weight: 700; margin-bottom: 8px; letter-spacing: -0.01em; } .book-card__desc { font-size: 14px; color: var(--color-text-soft); line-height: 1.5; margin-bottom: 12px; } .book-card__meta { display: flex; gap: 8px; font-size: 12px; color: var(--color-text-soft); margin-bottom: 12px; } .book-card__chapters::before { content: "馃摉 "; } .book-card__level::before { content: "路 "; } .book-card__universities { display: flex; flex-wrap: wrap; gap: 4px; } .uni-pill { display: inline-block; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 4px; padding: 2px 8px; font-size: 11px; font-weight: 600; color: var(--color-text-soft); } .cta { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; margin-top: 64px; } .cta__card { border: 1px solid var(--color-border); background: var(--color-surface); border-radius: 12px; padding: 24px; } .cta__card h3 { margin: 0 0 8px; font-size: 18px; } .cta__card p { margin: 0 0 16px; color: var(--color-text-soft); font-size: 14px; } /* ============================================================ * Book index * ============================================================ */ .book-index { max-width: 900px; margin: 0 auto; padding: 32px 24px 80px; } .breadcrumbs { font-size: 13px; color: var(--color-text-soft); margin-bottom: 16px; } .breadcrumbs a { color: var(--color-text-soft); text-decoration: none; } .breadcrumbs a:hover { color: var(--color-link); } .book-header { margin-bottom: 32px; } .book-header h1 { font-size: 36px; margin: 0 0 8px; letter-spacing: -0.02em; } .book-header__lead { color: var(--color-text-soft); font-size: 17px; margin: 0 0 16px; } .book-header__meta { display: flex; gap: 8px; flex-wrap: wrap; } .meta-pill { display: inline-block; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 999px; padding: 4px 12px; font-size: 12px; color: var(--color-text-soft); } .book-section { margin: 32px 0; } .book-section h2 { font-size: 20px; margin: 0 0 16px; } .university-list { list-style: none; padding: 0; margin: 0; } .university-list li { padding: 12px 16px; margin: 8px 0; background: var(--color-surface); border-left: 3px solid var(--color-link); border-radius: 4px; } .university-list li small { color: var(--color-text-soft); font-size: 12px; } .chapter-list { list-style: none; padding: 0; margin: 0; counter-reset: ch; } .chapter-list li { display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--color-border); } .chapter-list li:last-child { border-bottom: 0; } .chapter-list a { flex: 1; display: flex; align-items: center; gap: 12px; padding: 12px 0; color: var(--color-text); text-decoration: none; } .chapter-list a:hover { color: var(--color-link); } .chapter-num { font-family: var(--font-mono); color: var(--color-text-soft); font-size: 13px; min-width: 28px; } .chapter-title { flex: 1; } .chapter-meta { color: var(--color-text-soft); font-size: 12px; padding-right: 16px; } /* ============================================================ * Sponsor del libro (banner top de cap铆tulo) * ============================================================ */ .book-sponsor { border-bottom: 1px solid var(--color-border); background: var(--color-surface); padding: 12px 24px; } .book-sponsor__inner { max-width: var(--max-w); margin: 0 auto; } /* ============================================================ * Layout de cap铆tulo (3 columnas) * ============================================================ */ .layout { max-width: var(--max-w); margin: 0 auto; padding: 32px 24px; display: grid; grid-template-columns: var(--toc-w) 1fr var(--sidebar-w); gap: 32px; align-items: start; } @media (max-width: 1100px) { .layout { grid-template-columns: 1fr var(--sidebar-w); } .toc-left { display: none; } } @media (max-width: 800px) { .layout { grid-template-columns: 1fr; gap: 24px; padding: 16px; } .sidebar-right { display: none; } } .toc-left { position: sticky; top: 80px; font-size: 14px; border-right: 1px solid var(--color-border); padding-right: 16px; max-height: calc(100vh - 100px); overflow-y: auto; } .toc-left h3 { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-soft); margin: 0 0 8px; } .toc-left ul { list-style: none; padding: 0; margin: 0 0 16px; } .toc-left li { margin: 2px 0; } .toc-left a { display: block; padding: 4px 8px; color: var(--color-text-soft); text-decoration: none; border-radius: 4px; } .toc-left a:hover { background: var(--color-surface); color: var(--color-text); } .toc-left a.active { color: var(--color-text); background: var(--capa-fundamento-bg); font-weight: 600; } .toc-back { font-size: 13px; } .toc-back a { color: var(--color-text-soft); text-decoration: none; } .toc-back a:hover { color: var(--color-link); } /* ============================================================ * Contenido del cap铆tulo * ============================================================ */ .content { min-width: 0; max-width: var(--content-w); } .content h1 { font-size: 36px; line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 8px; } .content h2 { font-size: 24px; margin-top: 48px; margin-bottom: 12px; letter-spacing: -0.01em; } .content h3 { font-size: 19px; margin-top: 32px; margin-bottom: 8px; } .content h4 { font-size: 16px; margin-top: 24px; margin-bottom: 8px; } .content p { margin: 14px 0; } .content ul, .content ol { padding-left: 20px; } .content li { margin: 6px 0; } .content blockquote { font-style: italic; border-left: 3px solid var(--color-border); padding: 4px 16px; color: var(--color-text-soft); margin: 16px 0; } .content table { border-collapse: collapse; width: 100%; margin: 16px 0; font-size: 14px; } .content th, .content td { text-align: left; padding: 8px 12px; border-bottom: 1px solid var(--color-border); } .content th { font-weight: 600; background: var(--color-surface); } .content hr { border: 0; border-top: 1px solid var(--color-border); margin: 32px 0; } .content img { max-width: 100%; height: auto; border-radius: 6px; } .content pre { background: var(--color-code-bg); color: var(--color-code-text); padding: 16px 18px; border-radius: 8px; overflow-x: auto; font-size: 14px; line-height: 1.5; } .content :not(pre) > code { background: var(--color-surface); padding: 1px 5px; border-radius: 3px; border: 1px solid var(--color-border); font-size: 0.9em; } .figure { margin: 24px 0; text-align: center; } .figure img { max-width: 100%; height: auto; border: 1px solid var(--color-border); border-radius: 6px; } .figure figcaption { margin-top: 8px; font-size: 13px; color: var(--color-text-soft); font-style: italic; } /* Math: KaTeX trae sus propios estilos (/katex/katex.min.css). * Aqu铆 s贸lo el wrapper de bloques display generados por preprocess.js. */ .math-display { margin: 16px 0; overflow-x: auto; /* f贸rmulas largas en m贸vil hacen scroll */ overflow-y: hidden; } .math-display .katex-display { margin: 0; } /* evita doble margen */ /* Diagramas SVG inline. * Los SVG deben usar stroke/fill="currentColor" para heredar el color * del tema (var(--color-text)). De este modo el mismo SVG se ve correcto * en modo claro y oscuro sin duplicar archivos. */ .diagrama { display: block; max-width: 100%; height: auto; margin: 24px auto; color: var(--color-text); /* Padding lateral en m贸vil para que las etiquetas no toquen el borde */ padding: 8px 0; } .kbd-arrow { font-family: var(--font-mono); } /* ============================================================ * Capas pedag贸gicas + admonitions * ============================================================ */ .capa { margin: 24px 0; border-left: 4px solid; border-radius: 0 8px 8px 0; padding: 16px 20px; } .capa__title { font-weight: 700; margin: 0 0 8px; font-size: 14px; text-transform: uppercase; letter-spacing: 0.05em; } .capa--intuicion { border-color: var(--capa-intuicion-border); background: var(--capa-intuicion-bg); } .capa--intuicion .capa__title { color: var(--capa-intuicion-title); } .capa--fundamento { border-color: var(--capa-fundamento-border); background: var(--capa-fundamento-bg); } .capa--fundamento .capa__title { color: var(--capa-fundamento-title); } .capa--aplicado { border-color: var(--capa-aplicado-border); background: var(--capa-aplicado-bg); } .capa--aplicado .capa__title { color: var(--capa-aplicado-title); } .capa--ejemplo { border-color: var(--capa-ejemplo-border); background: var(--capa-ejemplo-bg); } .capa--ejemplo .capa__title { color: var(--capa-ejemplo-title); } .capa--ejercicio { border-color: var(--capa-ejercicio-border); background: var(--capa-ejercicio-bg); } .capa--ejercicio .capa__title { color: var(--capa-ejercicio-title); } .capa--trampa { border-color: var(--capa-trampa-border); background: var(--capa-trampa-bg); } .capa--trampa .capa__title { color: var(--capa-trampa-title); } .capa--historia { border-color: var(--capa-historia-border); background: var(--capa-historia-bg); } .capa--historia .capa__title { color: var(--capa-historia-title); font-style: italic; } .capa--proyecto { border-color: var(--capa-proyecto-border); background: var(--capa-proyecto-bg); } .capa--proyecto .capa__title { color: var(--capa-proyecto-title); } .capa--default { border-color: var(--color-border); background: var(--color-surface); } .capa--default .capa__title { color: var(--color-text-soft); } details.dropdown { margin: 16px 0; border: 1px solid var(--color-border); border-radius: 6px; padding: 0; } details.dropdown > summary { cursor: pointer; padding: 12px 16px; font-weight: 600; background: var(--color-surface); border-radius: 6px; } details.dropdown[open] > summary { border-radius: 6px 6px 0 0; border-bottom: 1px solid var(--color-border); } details.dropdown > div { padding: 12px 16px; } /* ============================================================ * Sidebar derecho * ============================================================ */ .sidebar-right { position: sticky; top: 80px; font-size: 14px; display: flex; flex-direction: column; gap: 24px; } .sidebar-right h3 { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-soft); margin: 0 0 8px; } .toc-right ul { list-style: none; padding: 0; margin: 0; } .toc-right a { display: block; padding: 3px 8px; color: var(--color-text-soft); text-decoration: none; border-left: 2px solid transparent; } .toc-right a:hover { color: var(--color-text); border-color: var(--color-border); } /* ============================================================ * Page nav (prev / next) + chapter foot * ============================================================ */ .page-nav { margin-top: 48px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .page-nav__link { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border: 1px solid var(--color-border); border-radius: 8px; text-decoration: none; color: var(--color-text); background: var(--color-bg-elev); } .page-nav__link:hover { border-color: var(--color-link); } .page-nav__link--next { text-align: right; } .page-nav__hint { font-size: 12px; color: var(--color-text-soft); } .page-nav__title { font-weight: 600; } .chapter-foot { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--color-border); font-size: 14px; color: var(--color-text-soft); } .chapter-foot a { color: var(--color-text-soft); text-decoration: underline; } .chapter-foot a:hover { color: var(--color-link); } /* ============================================================ * Tag pills * ============================================================ */ .tag-pill { display: inline-block; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 4px; padding: 1px 6px; margin: 1px; font-size: 11px; color: var(--color-text-soft); } /* ============================================================ * Status pills (manage.html + debug) * ============================================================ */ .status-pill { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; } .status-pill--on { background: #dcfce7; color: #14532d; } .status-pill--off { background: #fee2e2; color: #7f1d1d; } .status-pill--scheduled { background: #fef3c7; color: #78350f; } :root[data-theme="dark"] .status-pill--on { background: #14532d; color: #bbf7d0; } :root[data-theme="dark"] .status-pill--off { background: #450a0a; color: #fecaca; } :root[data-theme="dark"] .status-pill--scheduled { background: #422006; color: #fde68a; } /* ============================================================ * Anuncios * ============================================================ */ .ad { display: block; text-decoration: none; background: var(--ad-bg, #1e293b); color: var(--ad-text, #f8fafc); border-radius: 8px; padding: 16px 20px; position: relative; overflow: hidden; transition: transform 0.15s ease; } .ad:hover { transform: translateY(-1px); } .ad__label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.7; margin-bottom: 6px; } .ad__headline { font-size: 17px; font-weight: 700; line-height: 1.3; margin-bottom: 6px; } .ad__subhead { font-size: 14px; line-height: 1.45; opacity: 0.85; margin-bottom: 12px; } .ad__cta { display: inline-block; font-size: 14px; font-weight: 600; color: var(--ad-accent, #60a5fa); border-bottom: 1px solid currentColor; padding-bottom: 1px; } .ad--book-header { display: grid; grid-template-columns: auto 1fr auto; gap: 24px; align-items: center; padding: 14px 24px; } .ad--book-header .ad__label { margin-bottom: 0; white-space: nowrap; border-right: 1px solid currentColor; padding-right: 24px; opacity: 0.6; } .ad--book-header .ad__headline { font-size: 16px; margin-bottom: 2px; } .ad--book-header .ad__subhead { font-size: 13px; margin-bottom: 0; } .ad--book-header .ad__cta { font-size: 13px; white-space: nowrap; } @media (max-width: 700px) { .ad--book-header { grid-template-columns: 1fr; gap: 6px; } .ad--book-header .ad__label { border: 0; padding: 0; } } .ad--inline { margin: 32px 0; border-left: 4px solid var(--ad-accent); } .ad--footer { margin: 48px 0 24px; } .ad--adsense { background: var(--ad-fallback-bg); color: var(--ad-fallback-text); border: 1px dashed var(--ad-fallback-border); } .ad--adsense .ad__label { color: var(--color-text-soft); } .adsense-mock { display: flex; align-items: center; gap: 12px; } .adsense-mock__icon { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, #ea4335, #fbbc05, #34a853, #4285f4); color: white; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 18px; flex-shrink: 0; } .adsense-mock__hint { font-size: 12px; color: var(--color-text-soft); } .adsense-mock code { background: var(--color-bg-elev); padding: 1px 4px; border-radius: 3px; border: 1px solid var(--color-border); } .ad--empty { background: var(--color-surface); color: var(--color-text-soft); border: 1px dashed var(--color-border); font-size: 13px; padding: 12px 16px; } /* ============================================================ * Panel de debug (solo cap铆tulos) * ============================================================ */ #debug-panel { max-width: var(--max-w); margin: 32px auto; padding: 0 24px 48px; } #debug-panel details { background: var(--color-bg-elev); border: 1px solid var(--color-border); border-radius: 8px; padding: 16px 20px; font-size: 14px; } #debug-panel summary { cursor: pointer; font-weight: 600; color: var(--color-link); } #debug-panel table { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 13px; } #debug-panel th, #debug-panel td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--color-border); vertical-align: top; } #debug-panel th { color: var(--color-text-soft); font-weight: 600; } #debug-panel button { background: var(--color-surface); color: var(--color-text); border: 1px solid var(--color-border); padding: 6px 12px; border-radius: 6px; cursor: pointer; font-family: inherit; } /* ============================================================ * Footer * ============================================================ */ .site-footer { border-top: 1px solid var(--color-border); margin-top: 48px; padding: 32px 24px; font-size: 13px; color: var(--color-text-soft); background: var(--color-surface); } .site-footer__inner { max-width: var(--max-w); margin: 0 auto; } .site-footer p { margin: 8px 0; } .site-footer a { color: var(--color-text-soft); text-decoration: underline; } .site-footer a:hover { color: var(--color-link); } /* ============================================================ * manage.html 路 editor de patrocinadores * ============================================================ */ .manage { max-width: 1000px; margin: 0 auto; padding: 32px 24px 80px; } .manage h1 { font-size: 28px; margin: 0 0 8px; } .manage .help { color: var(--color-text-soft); background: var(--color-surface); border: 1px solid var(--color-border); border-left: 3px solid var(--color-link); padding: 12px 16px; border-radius: 6px; margin: 16px 0 24px; font-size: 14px; line-height: 1.5; } .manage .toolbar { display: flex; gap: 8px; margin-bottom: 24px; flex-wrap: wrap; align-items: center; } .manage .toolbar .spacer { flex: 1; } .sponsor-card { border: 1px solid var(--color-border); border-radius: 8px; margin: 12px 0; background: var(--color-bg-elev); overflow: hidden; } .sponsor-card[data-active="false"] { opacity: 0.55; } .sponsor-card > summary { cursor: pointer; padding: 14px 18px; display: flex; align-items: center; gap: 12px; list-style: none; user-select: none; } .sponsor-card > summary::-webkit-details-marker { display: none; } .sponsor-card > summary:hover { background: var(--color-surface); } .sponsor-card__name { font-weight: 600; } .sponsor-card__meta { color: var(--color-text-soft); font-size: 13px; margin-left: auto; } .sponsor-form { padding: 12px 18px 20px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 16px; border-top: 1px solid var(--color-border); } .sponsor-form .full { grid-column: 1 / -1; } .sponsor-form label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--color-text-soft); text-transform: uppercase; letter-spacing: 0.04em; } .sponsor-form input[type="text"], .sponsor-form input[type="url"], .sponsor-form input[type="number"], .sponsor-form input[type="date"], .sponsor-form textarea { padding: 6px 10px; border: 1px solid var(--color-border); border-radius: 4px; background: var(--color-input-bg); color: var(--color-text); font-size: 14px; font-family: inherit; } .sponsor-form textarea { min-height: 60px; resize: vertical; } .sponsor-form .checkbox-row { display: flex; gap: 12px; flex-wrap: wrap; } .sponsor-form .checkbox-row label { flex-direction: row; text-transform: none; letter-spacing: 0; color: var(--color-text); font-size: 14px; } .sponsor-form .color-pair { display: flex; gap: 6px; align-items: center; } .sponsor-form .color-pair input[type="color"] { width: 36px; height: 32px; padding: 0; border: 1px solid var(--color-border); border-radius: 4px; background: var(--color-input-bg); } .sponsor-form .form-actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 8px; border-top: 1px solid var(--color-border); padding-top: 12px; } :root[data-theme="dark"] .btn--danger { background: #991b1b; border-color: #7f1d1d; }