/* Foro de Affont (api/community.ts). Cabecera, pie y botones: las mismas reglas que la landing (public/affont.html); el resto, la estética elegida en el lienzo (mesas 7 y 8), con fondo gris claro (#f9f9f9) desde octubre de 2026: tarjetas blancas, cajas de categoría con los íconos de Nucleo, votos a la izquierda y la respuesta aceptada en verde. Los rellenos, bordes y grises de texto son neutros (sin tonos crema). */ :root { --bg: #000; --card: #1c1919; --card-2: #2a2626; --text: #fff; --muted: #aca69e; --line: #2b2727; --page: #f9f9f9; --fill: #f1f1f1; --fill-2: #e5e5e5; --paper: #fff; --rule: #dcdcdc; --rule-2: #ebebeb; --ink: #0e1318; --ink-2: #46484c; --ink-3: #66686d; --green: #a7f175; --green-ink: #26301d; /* el azul de las guías de la landing: enlaces, foco y el verificado */ --blue: #1F6FFF; --blue-ink: #1557D6; --pink: #ffa9db; --teal: #92dcde; --orange: #ff6433; /* lo que cambia con el tema (en claro, los valores de siempre) */ --solid: #0e1318; --on-solid: #fff; --solid-hv: #2c2c2c; --hover: rgba(14, 19, 24, .06); --prose: #26282b; --tint-green: #f6fbef; --tint-orange: #fff3ee; --danger: #b8431a; --img-bg: #f1f1f1; --box-dark: #0e1318; --box-dark-line: #0e1318; /* el borde del hilo fijado */ --pinned: #0e1318; /* tinta sobre colores claros (el verde, los avatares): no cambia con el tema */ --on-color: #0e1318; --serif: 'Fraunces', 'Noto Serif JP', Georgia, serif; --font: 'Figtree', 'Noto Sans JP', system-ui, sans-serif; --gutter: clamp(16px, 4vw, 56px); --r: 12px; } /* Modo oscuro: lo elige cada quien en el pie (Claro, Oscuro o Sistema; community-boot.js lo aplica antes de pintar). «Sistema», lo que hay si nadie eligió, sigue la preferencia del equipo. La cabecera, el pie y los menús ya son oscuros y no cambian; cambian la página, las tarjetas y los textos. Los dos bloques llevan los mismos valores */ :root[data-theme='dark'] { color-scheme: dark; --page: #1c1c1c; --fill: #303030; --fill-2: #3b3b3b; --paper: #262626; --rule: #3d3d3d; --rule-2: #323232; --ink: #f3f3f0; --ink-2: #c9c9c2; --ink-3: #a3a39c; --blue: #6ea6ff; --blue-ink: #6ea6ff; --solid: #f3f3f0; --on-solid: #121212; --solid-hv: #dcdcd6; --hover: rgba(243, 243, 240, .08); --prose: #e4e4df; --tint-green: rgba(167, 241, 117, .1); --tint-orange: rgba(255, 100, 51, .12); --danger: #ff8a5c; --img-bg: #f3f3f0; --box-dark: #141414; --box-dark-line: #3d3d3d; --pinned: rgba(167, 241, 117, .45); } @media (prefers-color-scheme: dark) { :root:not([data-theme='light']) { color-scheme: dark; --page: #1c1c1c; --fill: #303030; --fill-2: #3b3b3b; --paper: #262626; --rule: #3d3d3d; --rule-2: #323232; --ink: #f3f3f0; --ink-2: #c9c9c2; --ink-3: #a3a39c; --blue: #6ea6ff; --blue-ink: #6ea6ff; --solid: #f3f3f0; --on-solid: #121212; --solid-hv: #dcdcd6; --hover: rgba(243, 243, 240, .08); --prose: #e4e4df; --tint-green: rgba(167, 241, 117, .1); --tint-orange: rgba(255, 100, 51, .12); --danger: #ff8a5c; --img-bg: #f3f3f0; --box-dark: #141414; --box-dark-line: #3d3d3d; --pinned: rgba(167, 241, 117, .45); } } /* Sobre el verde (la barra del equipo, «Publica en la comunidad») la tinta es la del modo claro en los dos temas */ .cm-modbar, .cm-box-green { --ink: #0e1318; --ink-2: #46484c; --ink-3: #66686d; --solid: #0e1318; --on-solid: #fff; --solid-hv: #2c2c2c; --hover: rgba(14, 19, 24, .06); color: var(--ink); } :lang(zh) { --serif: 'Fraunces', 'Noto Serif SC', Georgia, serif; --font: 'Figtree', 'Noto Sans SC', system-ui, sans-serif; } :lang(vi) { --font: 'Be Vietnam Pro', system-ui, sans-serif; } /* Tailandés: las letras tailandesas, en Noto Sans Thai y Noto Serif Thai (Figtree y Fraunces no las tienen; lo latino y los números siguen en Figtree y Fraunces) */ :lang(th) { --serif: 'Fraunces', 'Noto Serif Thai', Georgia, serif; --font: 'Figtree', 'Noto Sans Thai', system-ui, sans-serif; } * { box-sizing: border-box; } /* `hidden` gana siempre, aunque la regla del componente le dé display (formularios, barra de moderación, botones) */ [hidden] { display: none !important; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--text); font: 400 16px/1.55 var(--font); -webkit-font-smoothing: antialiased; overflow-x: hidden; } svg { display: block; } a { color: inherit; } img { max-width: 100%; height: auto; } ::selection { background: var(--green); color: var(--on-color); } :focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; } .wrap { width: 100%; max-width: 1440px; margin: 0 auto; padding: 0 clamp(16px, 3.2vw, 48px); } .ic { width: 20px; height: 20px; flex-shrink: 0; display: inline-block; vertical-align: -4px; } h1, h2, h3 { font-family: var(--serif); font-weight: 700; margin: 0; letter-spacing: -.02em; font-variation-settings: 'SOFT' 50, 'WONK' 0; } .cm-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .cm-skip { position: absolute; left: -999px; top: 8px; z-index: 99; background: var(--green); color: var(--on-color); padding: 8px 12px; border-radius: 8px; } .cm-skip:focus { left: 8px; } /* ———————— botones: los de la landing y la home de visual.af (12 px de radio, Figtree 500 y, al pasar el puntero, un tono más oscuro) ———————— */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: 500 15px/1.2 var(--font); text-decoration: none; padding: 12px 18px; border: 0; border-radius: var(--r); cursor: pointer; background: var(--green); color: var(--on-color); transition: background-color .15s, transform .15s; white-space: nowrap; } .btn:hover { background-color: #92dc62; } .btn:active { transform: translateY(1px); } .btn:disabled { opacity: .6; cursor: default; } .btn .price { font-variant-numeric: tabular-nums; padding-left: .7em; border-left: 1px solid color-mix(in srgb, currentColor 30%, transparent); } .btn.sm { padding: 9px 14px; font-size: 14px; } .btn.dark { background: var(--solid); color: var(--on-solid); } .btn.dark:hover { background-color: var(--solid-hv); } .btn.outline { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); } .btn.outline:hover { background-color: var(--hover); } .btn.ghost { background: var(--paper); color: var(--ink); box-shadow: inset 0 0 0 1px var(--rule); } .btn.ghost:hover { background-color: var(--fill); } /* ———————— cabecera: la de la landing sobre negro (public/affont.html, .top[data-on='dark']) ———————— */ .top { position: sticky; top: 0; z-index: 50; height: 64px; background: var(--bg); color: #F3F3F0; } .top .wrap { display: flex; align-items: center; gap: clamp(12px, 2vw, 28px); height: 100%; } .logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font: 800 1.15rem/1 var(--font); letter-spacing: -.02em; color: inherit; } .logo-mark { width: 28px; height: 28px; flex-shrink: 0; border-radius: 6px; overflow: hidden; transition: translate .4s cubic-bezier(.2, .9, .1, 1); } @media (hover: hover) { .logo:hover .logo-mark { translate: 0 -3px; } } .top nav { display: flex; gap: clamp(12px, 1.4vw, 24px); margin-left: auto; } .top nav a { display: inline-block; padding: 8px 0; white-space: nowrap; text-decoration: none; font-weight: 400; font-size: 15px; color: inherit; background: linear-gradient(var(--blue) 0 0) left 76% / 0% 1.5px no-repeat; transition: background-size .4s cubic-bezier(.2, .9, .1, 1); } @media (hover: hover) { .top nav a:hover { background-size: 100% 1.5px; } } .top nav a:focus-visible, .top nav a[aria-current] { background-size: 100% 1.5px; } .top nav a[aria-current] { font-weight: 600; } /* idioma: el menú de la cabecera de la landing (un details con enlaces), con el aspecto del menú de la cuenta */ .lang { position: relative; } .lang summary { list-style: none; display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 0 12px; border: 1px solid rgba(243, 243, 240, .14); border-radius: var(--r); color: inherit; font: 600 15px/1 var(--font); white-space: nowrap; cursor: pointer; user-select: none; transition: border-color .3s; } .lang summary::-webkit-details-marker { display: none; } @media (hover: hover) { .lang summary:hover { border-color: currentColor; } } .lang[open] summary { border-color: currentColor; } .lang .ic { flex: none; fill: none; stroke: currentColor; } .lang .ic.g { width: 16px; height: 16px; } .lang .ic.c { width: 10px; height: 10px; transition: rotate .3s cubic-bezier(.2, .9, .1, 1); } .lang[open] .ic.c { rotate: 180deg; } .lang__list { position: absolute; right: 0; top: calc(100% + 8px); z-index: 70; min-width: 220px; margin: 0; padding: 6px; list-style: none; background: var(--card); color: var(--text); border: 1px solid rgba(243, 243, 240, .12); border-radius: var(--r); } .lang[open] .lang__list, .cm-acct[open] .cm-acct-menu, .cm-bell[open] .cm-bell-menu { animation: cm-menu-in .18s cubic-bezier(.2, .9, .1, 1); } @keyframes cm-menu-in { from { opacity: 0; translate: 0 -4px; } } .lang__list a { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 12px; border-radius: 8px; font: 500 14px/1.2 var(--font); color: var(--text); text-decoration: none; } .lang__list a:hover { background: var(--card-2); } .lang__list small { font-size: 12px; font-weight: 600; color: #A3A39C; } .lang__list a[aria-current], .lang__list a[aria-current] small { color: var(--green); font-weight: 700; } .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* «Entrar»: un enlace, como en la landing */ .top .cm-signin { min-height: 40px; padding: 8px 2px; border-radius: 0; font-weight: 600; font-size: 15px; color: inherit; background: linear-gradient(var(--blue) 0 0) left 76% / 0% 1.5px no-repeat; transition: background-size .4s cubic-bezier(.2, .9, .1, 1); } @media (hover: hover) { .top .cm-signin:hover { background-color: transparent; background-size: 100% 1.5px; } } .top .btn.sm.buy { min-height: 40px; padding: 8px 14px; font-size: 15px; gap: .7em; } .cm-acct { position: relative; } .cm-acct summary { list-style: none; cursor: pointer; display: flex; border-radius: 50%; } .cm-acct summary::-webkit-details-marker { display: none; } .cm-acct-menu { position: absolute; right: 0; top: calc(100% + 8px); min-width: 180px; background: var(--card); border: 1px solid rgba(243, 243, 240, .12); border-radius: var(--r); padding: 6px; display: flex; flex-direction: column; } .cm-acct-menu a, .cm-acct-menu button { display: block; text-align: left; font: 500 14px var(--font); color: var(--text); background: none; border: 0; padding: 10px 12px; border-radius: 8px; text-decoration: none; cursor: pointer; } .cm-acct-menu a:hover, .cm-acct-menu button:hover { background: var(--card-2); } .cm-acct-admin { display: flex !important; align-items: center; justify-content: space-between; gap: 12px; } .cm-acct-admin span { min-width: 20px; padding: 1px 6px; border-radius: 999px; background: var(--green); color: var(--on-color); font-size: 12px; font-weight: 700; text-align: center; } /* Con una cuenta guardada en este navegador (community-boot.js, antes de pintar), la campana y la foto desde el principio: la cabecera no salta de «Entrar» a la cuenta */ html.cm-me .top .cm-signin { display: none; } html.cm-me .top .cm-bell[hidden], html.cm-me .top .cm-acct[hidden] { display: block !important; } /* «Menú» y el menú a pantalla completa, los de la landing (por debajo de 1180 px; el menú lo arma community.js) */ /* el texto de los botones de la landing toma el tamaño de su cuerpo de texto (17 a 18 px) */ .menu-btn { display: none; min-height: 40px; padding: 0 14px; border: 1.5px solid currentColor; border-radius: var(--r); background: none; color: inherit; font: 700 clamp(1.0625rem, 1rem + .2vw, 1.125rem)/1.55 var(--font); cursor: pointer; } .menu { position: fixed; inset: 0; z-index: 60; background: #000; color: #F3F3F0; display: flex; flex-direction: column; justify-content: space-between; padding: 72px clamp(16px, 3.2vw, 48px) 28px; overflow-y: auto; } .menu nav { display: grid; gap: 4px; } .menu nav a { display: block; padding: 6px 0; font: 700 clamp(2rem, 9vw, 3rem)/1.1 var(--serif); font-variation-settings: 'SOFT' 50; letter-spacing: -.015em; text-decoration: none; color: inherit; animation: cm-menu-link .6s cubic-bezier(.16, 1, .3, 1) both; animation-delay: calc(var(--i, 0) * 40ms); } .menu nav a[aria-current] { color: var(--green); } @keyframes cm-menu-link { from { opacity: 0; translate: 0 60%; } } .menu__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 24px; } /* los idiomas, a la vista, en dos columnas */ .menu .menu__langs { flex-basis: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; padding-top: 14px; border-top: 1px solid rgba(243, 243, 240, .2); } .menu .menu__langs a { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; font: 500 1rem/1.2 var(--font); text-decoration: none; color: #F3F3F0; } .menu .menu__langs small { font: 600 12px/1 var(--font); color: #A3A39C; } .menu .menu__langs a[aria-current], .menu .menu__langs a[aria-current] small { color: var(--green); font-weight: 700; } .menu__close { min-height: 44px; padding: 0 18px; border: 1.5px solid #F3F3F0; border-radius: var(--r); background: none; color: inherit; font: 700 clamp(1.0625rem, 1rem + .2vw, 1.125rem)/1.55 var(--font); cursor: pointer; } html.cm-menu-open { overflow: hidden; } @media (prefers-reduced-motion: reduce) { .menu nav a { animation: none; } } /* Por debajo de 1180 px, como la landing: el logo a la izquierda y a la derecha la compra y «Menú» (los enlaces, el idioma y «Entrar» pasan al menú). La campana y la foto quedan a la vista */ @media (max-width: 1180px) { .top nav, .top .lang, .top .cm-signin { display: none; } .top .logo { margin-right: auto; } .menu-btn { display: inline-flex; align-items: center; } } /* teléfonos: los mismos pasos que la landing para que entren la compra y «Menú» */ @media (max-width: 480px) { .top .logo-text { display: none; } } @media (max-width: 440px) { .top .btn.sm.buy { padding-inline: .8em; } .top .btn .price { padding-left: .55em; } } @media (max-width: 400px) { .top .wrap { gap: 10px; } .top .btn.sm.buy { font-size: .875rem; padding-inline: .65em; } .top .btn .price { padding-left: .5em; } .menu-btn { padding: 0 10px; font-size: .875rem; } } @media (max-width: 350px) { .top .btn .price { display: none; } } /* con sesión, en el teléfono la campana y la foto ocupan el lugar de la compra */ @media (max-width: 560px) { html.cm-me .top .buy, .top .wrap:has(> .cm-acct:not([hidden])) .buy { display: none; } } /* Al pasar de la landing al foro (y entre páginas del foro o de la landing), la cabecera queda quieta: cada pieza se desliza a su lugar nuevo y el resto de la página se funde. La landing pide lo mismo con los mismos nombres (AFFONT_HEADER_TRANSITION en site/affont.mjs); si cambia uno, cambia el otro */ @media (prefers-reduced-motion: no-preference) { @view-transition { navigation: auto; } } .top { view-transition-name: af-top; } .top .logo { view-transition-name: af-logo; } .top nav { view-transition-name: af-nav; } .top .lang { view-transition-name: af-lang; } .top .cm-signin { view-transition-name: af-signin; } .top .cm-bell { view-transition-name: af-bell; } .top .cm-acct { view-transition-name: af-avatar; } .top .buy { view-transition-name: af-buy; } .top .menu-btn { view-transition-name: af-menu; } ::view-transition-group(*) { animation-duration: .45s; animation-timing-function: cubic-bezier(.2, .9, .1, 1); } ::view-transition-old(root) { animation: cm-vt-out .2s ease both; } ::view-transition-new(root) { animation: cm-vt-in .4s cubic-bezier(.2, .9, .1, 1) both; } @keyframes cm-vt-out { to { opacity: 0; } } @keyframes cm-vt-in { from { opacity: 0; translate: 0 10px; } } /* ———————— pie de la landing ———————— */ footer { background: var(--bg); color: #F3F3F0; padding: 56px 0 40px; font-size: 15px; } footer .wrap { display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: center; } footer .logo { color: #F3F3F0; } footer nav { display: flex; gap: 6px 22px; flex-wrap: wrap; margin-left: auto; } footer a { display: inline-block; padding-block: 4px; text-decoration: none; color: #C9C9C2; } @media (hover: hover) { footer a:hover { color: #fff; text-decoration: underline; text-underline-offset: .25em; } } footer [data-i='foot.legal'] { color: #A3A39C; font-size: 13px; padding-top: 18px; border-top: 1px solid rgba(243, 243, 240, .14); } .foot-langs, .foot-guides { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 4px 18px; margin-left: 0 !important; } .foot-langs span { color: #F3F3F0; padding-block: 4px; } /* el tema (Claro, Oscuro, Sistema), al final del pie: los tres juntos, con el borde fino de los de la cabecera */ .cm-theme-row { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding-top: 10px; } .cm-theme-label { color: #A3A39C; font-size: 13px; } .cm-theme { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid rgba(243, 243, 240, .14); border-radius: var(--r); } .cm-theme button { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 12px; border: 0; border-radius: 9px; background: none; color: #C9C9C2; font: 500 14px/1 var(--font); cursor: pointer; transition: background-color .15s, color .15s; } @media (hover: hover) { .cm-theme button:hover { color: #fff; } } .cm-theme button[aria-pressed='true'] { background: var(--card-2); color: #fff; } .cm-theme .cm-ic { width: 16px; height: 16px; } /* ———————— foro ———————— */ .cm-main-wrap { background: var(--page); color: var(--ink); padding: 0 0 72px; min-height: 60vh; } .cm-wrap { max-width: 1200px; margin: 0 auto; padding: 36px var(--gutter) 0; } .cm-narrow { max-width: 820px; } .cm-muted { color: var(--ink-3); } .cm-small { font-size: 13px; color: var(--ink-3); margin: 8px 0 0; } .cm-center { text-align: center; } .cm-lead { font-size: 17px; line-height: 1.55; color: var(--ink-2); margin: 12px 0 0; } .cm-page-title { font-size: clamp(32px, 4vw, 46px); line-height: 1.05; } .cm-section-title { font-size: 26px; margin: 34px 0 14px; } .cm-crumbs { font-size: 13px; color: var(--ink-3); margin-bottom: 14px; } .cm-crumbs a { color: var(--ink-3); text-decoration: none; } .cm-crumbs a:hover { text-decoration: underline; } /* Reporte de error privado: una línea gris bajo las migas (abierto o resuelto), sin recuadro */ .cm-report-note { font-size: 14px; color: var(--ink-3); margin: -6px 0 14px; } .cm-compose > .cm-form-btns { margin-top: 24px; flex-wrap: wrap; } .cm-ic { flex-shrink: 0; } .cm-hero { text-align: center; max-width: 820px; margin: 8px auto 30px; } .cm-hero h1 { font-size: clamp(38px, 5.4vw, 60px); line-height: .98; text-wrap: balance; } .cm-hero h1 em { font-style: italic; font-weight: 500; font-variation-settings: 'SOFT' 100, 'WONK' 1; } html[lang='ja'] .cm-hero h1, html[lang='zh-CN'] .cm-hero h1 { letter-spacing: 0; line-height: 1.2; } html[lang='ja'] .cm-hero h1 em, html[lang='zh-CN'] .cm-hero h1 em { font-style: normal; } /* Tailandés: las vocales y los tonos se apilan arriba y abajo, así que los titulares necesitan más interlínea; sin interletrado negativo ni cursiva falsa. Alemán: las palabras compuestas largas se parten con guion en vez de salirse */ html[lang='th'] h1, html[lang='th'] h2, html[lang='th'] h3 { letter-spacing: 0; line-height: 1.35; } html[lang='th'] .cm-hero h1 { line-height: 1.3; } html[lang='th'] .cm-hero h1 em { font-style: normal; } html[lang='th'] .cm-card-title, html[lang='th'] .cm-links { line-height: 1.5; letter-spacing: 0; } html[lang='de'] h1, html[lang='de'] h2, html[lang='de'] .cm-card-title { hyphens: auto; overflow-wrap: break-word; } .cm-hero .cm-lead { margin: 14px auto 22px; max-width: 680px; } .cm-popular { margin: 12px 0 0; font-size: 13px; color: var(--ink-3); } .cm-popular a { color: var(--ink); font-weight: 600; } .cm-search { display: flex; gap: 8px; align-items: center; background: var(--paper); border: 1px solid var(--rule); border-radius: 16px; padding: 6px 6px 6px 16px; margin: 0 auto; max-width: 680px; color: var(--ink-3); } .cm-search input { flex: 1; min-width: 0; border: 0; background: none; font: 400 16px var(--font); color: var(--ink); outline: none; padding: 8px 0; } .cm-search .btn { border-radius: 11px; background: var(--solid); color: var(--on-solid); } .cm-search .btn:hover { background: var(--solid-hv); } .cm-search:focus-within { border-color: var(--ink); } .cm-narrow .cm-search { margin: 0 0 8px; max-width: none; } /* cajas de categorías */ /* Cinco categorías («Errores» es privado y no va): en una fila; más angostas, 3 + 2 o 2 + 2 + 1, sin huecos */ .cm-cats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-bottom: 36px; } /* Todas iguales, blancas como «Pedidos» (Emma no quiere bloques multicolor) */ .cm-cat { border-radius: 14px; padding: 16px 16px 14px; display: flex; flex-direction: column; justify-content: space-between; gap: 20px; min-height: 104px; text-decoration: none; color: var(--ink); background: var(--paper); border: 1px solid var(--rule); transition: transform .15s, border-color .15s; } .cm-cat:hover { transform: translateY(-2px); border-color: var(--ink); } .cm-cat[aria-current='page'] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); } .cm-cat-name { font-weight: 700; font-size: 14px; } .cm-cat-name small { display: block; font-weight: 500; font-size: 12px; opacity: .78; } @media (max-width: 980px) { .cm-cats { grid-template-columns: repeat(6, minmax(0, 1fr)); } .cm-cats .cm-cat { grid-column: span 2; } .cm-cats .cm-cat:nth-child(n+4) { grid-column: span 3; } } @media (max-width: 520px) { .cm-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .cm-cats .cm-cat, .cm-cats .cm-cat:nth-child(n+4) { grid-column: auto; } .cm-cats .cm-cat:last-child { grid-column: 1 / -1; } .cm-cat { min-height: 88px; padding: 12px; } } .cm-cat-hero { display: flex; gap: 18px; align-items: center; border-radius: 18px; padding: 24px 26px; margin-bottom: 18px; background: var(--paper); border: 1px solid var(--rule); } .cm-cat-hero h1 { font-size: clamp(30px, 4vw, 44px); line-height: 1; } .cm-cat-hero p { margin: 8px 0 0; font-size: 16px; opacity: .85; } /* columnas */ .cm-cols { display: flex; gap: 28px; flex-wrap: wrap; align-items: flex-start; } .cm-feed, .cm-thread { flex: 999 1 600px; min-width: 0; } .cm-side { flex: 1 1 290px; max-width: 340px; display: flex; flex-direction: column; gap: 14px; } @media (max-width: 960px) { .cm-side { max-width: none; } } .cm-feed-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; } .cm-feed-head h2 { font-size: 28px; } .cm-sorts { display: flex; gap: 4px; background: var(--paper); border: 1px solid var(--rule); border-radius: 10px; padding: 4px; font-size: 13px; font-weight: 600; flex-wrap: wrap; } .cm-sorts a { padding: 7px 12px; border-radius: 7px; color: var(--ink-3); text-decoration: none; } .cm-sorts a[aria-current='page'] { background: var(--solid); color: var(--on-solid); } /* tarjetas de hilos */ .cm-list { display: flex; flex-direction: column; gap: 10px; } .cm-card { background: var(--paper); border: 1px solid var(--rule); border-radius: 14px; padding: 16px 18px; display: flex; gap: 16px; } .cm-card.cm-pinned { border-color: var(--pinned); } .cm-stats { display: flex; flex-direction: column; gap: 6px; width: 62px; flex-shrink: 0; text-align: center; font-size: 11px; color: var(--ink-3); } .cm-stat b { display: block; font-size: 16px; color: var(--ink); } .cm-stat-box { border: 1px solid var(--rule); border-radius: 8px; padding: 4px 0; } .cm-stat-solved { background: var(--green); border-radius: 8px; padding: 4px 0; color: var(--on-color); font-weight: 600; display: flex; flex-direction: column; align-items: center; } .cm-stat-solved .cm-ic { margin-bottom: -2px; } .cm-stat-solved b { color: var(--on-color); } .cm-card-body { flex: 1; min-width: 0; } .cm-card-top { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-bottom: 4px; } .cm-chip { font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 999px; text-decoration: none; color: var(--ink); background: var(--fill); } .cm-chip:hover { background: var(--fill-2); } .cm-flag { display: inline-flex; gap: 4px; align-items: center; font-size: 11px; font-weight: 600; color: var(--ink-3); background: var(--fill); padding: 2px 8px; border-radius: 999px; } .cm-flag-solved { background: var(--green); color: var(--on-color); } .cm-card-title { font-family: var(--font); font-size: 17px; font-weight: 700; letter-spacing: -.01em; line-height: 1.3; } .cm-card-title a { text-decoration: none; color: var(--ink); } .cm-card-title a:hover { color: var(--blue-ink); } .cm-excerpt { margin: 4px 0 10px; color: var(--ink-2); font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .cm-card-foot { font-size: 12px; color: var(--ink-3); } .cm-by { display: inline-flex; align-items: center; gap: 7px; } .cm-thumb { position: relative; width: 84px; height: 84px; border-radius: 12px; overflow: hidden; flex-shrink: 0; background: var(--fill); } .cm-thumb img { width: 100%; height: 100%; object-fit: cover; background: var(--img-bg); } /* miniatura de un video insertado: ▶ encima */ .cm-thumb-play { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; } .cm-thumb-play .cm-ic { width: 30px; height: 30px; padding: 8px 7px 8px 9px; box-sizing: border-box; border-radius: 50%; background: rgb(14 19 24 / .62); color: #fff; } /* contenido insertado sin miniatura (X, Instagram, Behance): el nombre del sitio */ .cm-thumb-site { display: grid; place-content: center; justify-items: center; gap: 5px; color: var(--ink-2); font-size: 11px; font-weight: 600; text-decoration: none; } .cm-thumb-site .cm-ic { color: var(--ink); } @media (max-width: 560px) { .cm-card { padding: 14px; gap: 12px; } .cm-stats { width: 48px; } .cm-thumb { display: none; } } /* avatares: una inicial sobre un color, nunca la foto de Google */ .cm-av { display: inline-grid; place-items: center; border-radius: 50%; background: var(--av, var(--fill-2)); color: var(--on-color); font-weight: 700; flex-shrink: 0; font-family: var(--font); } img.cm-av, .cm-av img { object-fit: cover; background: var(--fill-2); } .cm-av img { width: 100%; height: 100%; border-radius: 50%; } .cm-acct-av { overflow: hidden; } .cm-av-sm { width: 22px; height: 22px; font-size: 10px; } .cm-av-md { width: 32px; height: 32px; font-size: 12px; } .cm-av-lg { width: 72px; height: 72px; font-size: 28px; } .cm-av-none { background: var(--fill-2); color: var(--ink-3); } .top .cm-acct-av { width: 34px; height: 34px; font-size: 13px; background: var(--av, var(--pink)); } .cm-name { font-weight: 700; color: var(--ink); text-decoration: none; } a.cm-name:hover { text-decoration: underline; } .cm-badge { display: inline-block; font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 999px; margin-left: 6px; vertical-align: 1px; white-space: nowrap; line-height: 1.5; } .cm-badge-staff { background: var(--green); color: var(--on-color); } /* «Tiene Affont»: el logo en gris y suave, sin texto visible */ .cm-verified { display: inline-flex; align-items: center; gap: 2px; margin-left: 6px; vertical-align: -3px; } .cm-v-logo { width: 16px; height: 16px; border-radius: 4px; filter: saturate(0); opacity: .4; } /* solo el equipo lleva el logo en color (y el verificado) */ .cm-verified-staff .cm-v-logo { filter: none; opacity: 1; } .cm-v-check { width: 16px; height: 16px; color: var(--blue); } .cm-profile-badges .cm-verified { margin-left: 0; } .cm-profile-badges .cm-v-logo, .cm-profile-badges .cm-v-check { width: 20px; height: 20px; } .cm-badge-op { background: var(--pink); color: var(--on-color); } .cm-pager { display: flex; justify-content: space-between; align-items: center; margin-top: 18px; font-size: 14px; } .cm-empty { background: var(--paper); border: 1px dashed var(--rule); border-radius: 14px; padding: 28px; text-align: center; color: var(--ink-2); } .cm-empty .btn { margin-top: 10px; } /* barra lateral */ .cm-box { background: var(--paper); border: 1px solid var(--rule); border-radius: 14px; padding: 20px; } .cm-box h2 { font-size: 24px; line-height: 1.05; } .cm-box p { margin: 8px 0 0; font-size: 14px; line-height: 1.5; color: var(--ink-2); } /* Títulos chicos de la barra lateral: sin interletrado positivo ni mayúsculas (pedido de Emma) */ .cm-box-label { font-family: var(--font) !important; font-size: 14px !important; font-weight: 700 !important; letter-spacing: 0 !important; color: var(--ink-3); margin-bottom: 12px !important; } .cm-box-green { background: var(--green); border-color: var(--green); } .cm-box-green p { color: var(--green-ink); } .cm-box-green .cm-small { color: var(--green-ink); } .cm-box-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; } .cm-box-dark { background: var(--box-dark); border-color: var(--box-dark-line); color: #fff; } .cm-box-dark p { color: var(--muted); margin-bottom: 14px; } .cm-people { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: 14px; } .cm-people li { display: flex; align-items: center; gap: 10px; } .cm-people li > span:nth-child(2) { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; row-gap: 2px; } .cm-people li > .cm-muted { font-size: 13px; white-space: nowrap; } .cm-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 14px; font-weight: 600; line-height: 1.4; } .cm-links a { color: var(--blue-ink); text-decoration: none; } .cm-links a:hover { text-decoration: underline; } /* hilo */ /* Barra verde del equipo (community.js, modBar): arriba el estado y la cola del panel; abajo las acciones, con fondo blanco translúcido sobre el verde y los íconos de Nucleo */ .cm-modbar { background: var(--green); border-radius: 14px; padding: 14px 16px; margin-bottom: 18px; display: grid; gap: 12px; font-size: 14px; } .cm-modbar-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 16px; } .cm-modbar-head p { margin: 0; font-weight: 700; } .cm-modbar-head p span { font-weight: 500; color: var(--green-ink); } .cm-modbar-queue { display: inline-flex; align-items: center; gap: 6px; color: var(--green-ink); font-size: 13px; font-weight: 500; text-decoration: none; } .cm-modbar-queue:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; } .cm-modbar-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .cm-mod-btn { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px; border: 0; border-radius: 10px; background: rgb(255 255 255 / .55); color: var(--ink); font: 600 13px var(--font); white-space: nowrap; cursor: pointer; transition: background .15s; } .cm-mod-btn:hover { background: #fff; } .cm-mod-btn.dark { background: var(--solid); color: var(--on-solid); } .cm-mod-btn.dark:hover { background: var(--solid-hv); } .cm-mod-sep { width: 1px; height: 20px; margin: 0 4px; background: rgb(14 19 24 / .18); } @media (max-width: 640px) { .cm-mod-sep { display: none; } } .cm-mod-move { position: relative; display: inline-flex; align-items: center; color: var(--ink); } .cm-mod-move .cm-ic { position: absolute; pointer-events: none; } .cm-mod-move .cm-ic:first-child { left: 12px; } .cm-mod-move .cm-ic:last-child { right: 9px; } .cm-mod-move select { appearance: none; -webkit-appearance: none; height: 34px; padding: 0 32px 0 35px; border: 0; border-radius: 10px; background: rgb(255 255 255 / .55); color: var(--ink); font: 600 13px var(--font); cursor: pointer; transition: background .15s; } .cm-mod-move select:hover { background: #fff; } .cm-banner { display: flex; gap: 10px; align-items: flex-start; background: var(--paper); border: 1px solid var(--rule); border-left: 0; border-radius: 14px; padding: 14px 16px; margin-bottom: 18px; font-size: 14px; } .cm-banner p { margin: 0; } .cm-banner-pending, .cm-banner-changes { background: var(--tint-green); border-color: var(--green); } .cm-banner-rejected, .cm-banner-removed { background: var(--tint-orange); border-color: var(--orange); } .cm-pending-replies .cm-banner { flex-direction: column; } .cm-op { background: var(--paper); border: 1px solid var(--rule); border-radius: 18px; padding: 28px 30px 24px; display: flex; gap: 22px; } .cm-op-main { flex: 1; min-width: 0; } .cm-op h1 { font-size: clamp(30px, 3.6vw, 44px); line-height: 1.05; margin: 8px 0 0; overflow-wrap: anywhere; } .cm-byline { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 14px 0 20px; font-size: 14px; } .cm-vote { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 40px; flex-shrink: 0; } .cm-vote-big { width: 56px; } .cm-up { display: grid; place-items: center; width: 100%; aspect-ratio: 1; max-width: 44px; border: 0; border-radius: 10px; background: var(--fill); color: var(--ink); cursor: pointer; } .cm-vote:not(.cm-vote-big) .cm-up { max-width: 32px; } .cm-up:hover:not(:disabled) { background: var(--fill-2); } .cm-up.on { background: var(--green); color: var(--on-color); } .cm-up:disabled { opacity: .45; cursor: default; } .cm-up.on:disabled { opacity: 1; } .cm-score { font-weight: 700; font-size: 15px; } .cm-vote-big .cm-score { font-size: 18px; } @media (max-width: 600px) { .cm-op { padding: 18px; gap: 12px; } .cm-vote-big { width: 40px; } } .cm-prose { font-size: 16px; line-height: 1.65; color: var(--prose); overflow-wrap: anywhere; } .cm-prose > :first-child { margin-top: 0; } .cm-prose > :last-child { margin-bottom: 0; } .cm-prose p, .cm-prose ul, .cm-prose ol, .cm-prose blockquote, .cm-prose pre { margin: 0 0 12px; } .cm-prose h3, .cm-prose h4 { font-family: var(--font); font-weight: 700; letter-spacing: -.01em; margin: 18px 0 8px; } .cm-prose h3 { font-size: 19px; } .cm-prose h4 { font-size: 16px; } .cm-prose a { color: var(--blue-ink); } /* las imágenes con transparencia (letras negras sobre nada) se leen también en el modo oscuro */ .cm-prose img { display: block; border-radius: 12px; margin: 12px 0; background: var(--img-bg); } /* Contenido insertado (api/_community/embeds.ts): el iframe y, debajo, el enlace original */ .cm-embed { margin: 14px 0; } .cm-embed iframe { display: block; width: 100%; border: 0; border-radius: 12px; background: var(--fill); } .cm-embed-wide iframe { aspect-ratio: 16 / 9; } .cm-embed-card iframe { aspect-ratio: 4 / 3; } .cm-embed-vertical iframe { aspect-ratio: 9 / 16; max-width: 340px; } .cm-embed-tiktok iframe { max-width: 340px; height: 740px; } .cm-embed-post iframe { max-width: 540px; height: 640px; } .cm-embed-audio iframe { height: 152px; } .cm-embed-audio-lg iframe { height: 352px; } .cm-embed-code iframe { height: 420px; } .cm-embed figcaption { margin-top: 6px; font-size: 13px; overflow-wrap: anywhere; } .cm-prose .cm-embed figcaption a { color: var(--ink-3); } /* Spoiler: plegado; el contenido está en la página (los buscadores lo leen) y se abre con un clic */ .cm-prose .cm-spoiler { margin: 0 0 12px; border: 1px solid var(--rule); border-radius: 10px; background: var(--paper); } .cm-prose .cm-spoiler > summary { display: flex; align-items: center; gap: 10px; padding: 10px 14px; font-weight: 600; cursor: pointer; list-style: none; } .cm-prose .cm-spoiler > summary::-webkit-details-marker { display: none; } .cm-prose .cm-spoiler > summary::before { content: ''; width: 7px; height: 7px; flex-shrink: 0; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform .15s; } .cm-prose .cm-spoiler[open] > summary::before { transform: rotate(45deg); } .cm-prose .cm-spoiler[open] > summary { border-bottom: 1px solid var(--rule-2); } .cm-prose .cm-spoiler > :not(summary) { margin-left: 14px; margin-right: 14px; } .cm-prose .cm-spoiler > summary + * { margin-top: 12px; } /* Menciones: @apodo de quien participa del hilo */ .cm-prose .cm-mention { font-weight: 600; text-decoration: none; } .cm-prose .cm-mention:hover { text-decoration: underline; } .cm-prose code { background: var(--fill); padding: 1px 6px; border-radius: 6px; font-size: .9em; } .cm-prose pre { background: var(--fill); padding: 12px 14px; border-radius: 10px; overflow-x: auto; } .cm-prose pre code { background: none; padding: 0; } .cm-prose blockquote { border-left: 3px solid var(--rule); padding-left: 14px; color: var(--ink-2); } .cm-prose table { border-collapse: collapse; display: block; overflow-x: auto; } .cm-prose th, .cm-prose td { border: 1px solid var(--rule); padding: 6px 10px; } .cm-prose-op { max-width: 68ch; } .cm-actions { display: flex; gap: 6px 14px; flex-wrap: wrap; margin-top: 12px; } .cm-act { display: inline-flex; align-items: center; gap: 5px; background: none; border: 0; padding: 4px 0; font: 600 13px var(--font); color: var(--ink-3); cursor: pointer; } .cm-act:hover { color: var(--ink); text-decoration: underline; } .cm-act-mod { color: var(--danger); } .cm-report { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 10px; font-size: 13px; } .cm-report select, .cm-report input { font: 400 13px var(--font); border: 1px solid var(--rule); border-radius: 8px; padding: 7px 9px; background: var(--paper); } .cm-report input { flex: 1 1 160px; } .cm-replies h2 { font-family: var(--font); font-size: 17px; letter-spacing: 0; margin: 26px 0 12px; } .cm-replies h2 .cm-muted { font-weight: 500; } .cm-reply-list { display: flex; flex-direction: column; gap: 10px; } .cm-reply { background: var(--paper); border: 1px solid var(--rule); border-radius: 14px; padding: 16px 18px; display: flex; gap: 14px; scroll-margin-top: 90px; } .cm-reply:target { box-shadow: 0 0 0 3px var(--blue); } .cm-reply.cm-accepted { border-color: var(--green); box-shadow: 0 0 0 2px var(--green); } .cm-reply-main { flex: 1; min-width: 0; } .cm-reply-head { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 13px; margin-bottom: 6px; } .cm-permalink { text-decoration: none; } .cm-permalink:hover { text-decoration: underline; } .cm-accepted-label { display: inline-flex; align-items: center; gap: 5px; background: var(--green); color: var(--on-color); font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; margin: 0 0 8px; } .cm-children { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; } .cm-children .cm-reply { background: var(--page); padding: 12px 14px; } /* en el teléfono, las respuestas anidadas toman el ancho de los votos (un reporte privado no tiene votos) */ @media (max-width: 600px) { .cm-reply { padding: 12px; gap: 10px; } .cm-vote + .cm-reply-main .cm-children { margin-left: -42px; } } .cm-reply-login, .cm-note { background: var(--paper); border: 1px solid var(--rule); border-radius: 14px; padding: 16px 18px; margin-top: 14px; display: flex; gap: 14px; align-items: center; justify-content: space-between; flex-wrap: wrap; } .cm-reply-login p, .cm-note { margin: 0; color: var(--ink-2); } .cm-note { justify-content: flex-start; } .cm-reply-form, .cm-edit-form { background: var(--paper); border: 1px solid var(--rule); border-radius: 14px; padding: 14px 16px; margin-top: 14px; display: flex; flex-direction: column; gap: 10px; } .cm-reply-form, .cm-edit-form { position: relative; } .cm-hint { margin: -4px 0 0; } /* La lista de personas para mencionar, al escribir @ (justo debajo del campo, encima de lo que sigue: su top lo pone community.js) */ .cm-mention-menu { position: absolute; z-index: 30; left: 16px; margin: 0; padding: 4px; list-style: none; min-width: 240px; max-width: calc(100% - 32px); background: var(--paper); border: 1px solid var(--rule); border-radius: 12px; box-shadow: 0 10px 28px rgb(0 0 0 / 0.14); } .cm-mention-menu li { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 8px; cursor: pointer; font-size: 14px; } .cm-mention-menu li[aria-selected="true"] { background: var(--fill); } .cm-mention-menu .cm-av { width: 24px; height: 24px; font-size: 10px; } .cm-edit-form { padding: 0; border: 0; margin-top: 0; } .cm-replying { margin: 0; font-size: 13px; font-weight: 600; color: var(--ink-2); display: flex; gap: 10px; align-items: center; } textarea, .cm-form input:not([type=radio]), .cm-form select { width: 100%; font: 400 15px/1.5 var(--font); color: var(--ink); background: var(--fill); border: 1px solid transparent; border-radius: 10px; padding: 12px 14px; resize: vertical; } textarea:focus, .cm-form input:focus, .cm-form select:focus { outline: none; border-color: var(--ink); background: var(--paper); } .cm-form-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; } .cm-form-btns { display: flex; gap: 12px; align-items: center; } .cm-error { margin: 0; color: var(--danger); font-size: 14px; font-weight: 600; } .cm-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; } /* /new */ .cm-form { background: var(--paper); border: 1px solid var(--rule); border-radius: 18px; padding: 24px; margin-top: 22px; display: flex; flex-direction: column; gap: 6px; } .cm-form h2 { font-size: 26px; } .cm-form label { font-weight: 700; font-size: 14px; margin-top: 12px; } .cm-form .btn { align-self: flex-start; margin-top: 16px; } .cm-staff-date { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; padding: 12px 14px; border-radius: 12px; background: var(--tint-green); } .cm-staff-date label { margin-top: 0 !important; } .cm-handle { display: flex; align-items: center; background: var(--fill); border-radius: 10px; padding-left: 14px; } .cm-handle span { color: var(--ink-3); font-weight: 600; } .cm-handle input { background: transparent !important; } .cm-select { position: relative; } .cm-select select { appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 40px; font-weight: 600; } .cm-select::after { content: ''; position: absolute; right: 16px; top: 50%; width: 8px; height: 8px; border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: translateY(-70%) rotate(45deg); pointer-events: none; } .cm-tip { margin: 10px 0 0; font-size: 14px; color: var(--ink-2); background: var(--tint-green); border-radius: 10px; padding: 10px 12px; } .cm-tip:empty { display: none; } .cm-editor { margin-top: 14px; } .cm-editor-bar { display: flex; gap: 4px; align-items: center; margin-bottom: 6px; padding-bottom: 6px; border-bottom: 1px solid var(--rule-2); } .cm-tab { font: 600 13px var(--font); background: none; border: 0; padding: 7px 12px; border-radius: 8px; color: var(--ink-3); cursor: pointer; } .cm-tab[aria-selected='true'] { background: var(--solid); color: var(--on-solid); } /* barra de formato */ .cm-toolbar { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; } .cm-editor-bar .cm-toolbar { margin-left: auto; } .cm-tb-group { display: inline-flex; gap: 2px; } .cm-tb-group + .cm-tb-group { padding-left: 10px; border-left: 1px solid var(--rule); } .cm-tb { display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 8px; background: none; color: var(--ink-2); cursor: pointer; } .cm-tb:hover:not(:disabled) { background: var(--fill); color: var(--ink); } .cm-tb:disabled { opacity: .35; cursor: default; } .cm-reply-form .cm-toolbar, .cm-edit-form .cm-toolbar { margin-bottom: -4px; } @media (max-width: 560px) { .cm-editor-bar { flex-wrap: wrap; } .cm-editor-bar .cm-toolbar { margin-left: 0; width: 100%; } .cm-tb-group + .cm-tb-group { padding-left: 6px; } } .cm-preview { min-height: 200px; background: var(--paper); border: 1px dashed var(--rule); border-radius: 10px; padding: 12px 14px; } /* Editor con formato (site/editor/, ProseMirror): se escribe sobre el resultado, con los estilos del mensaje publicado (.cm-prose). Markdown es el