/* =====================================================================
   AK Comunidad — estilos (plugin). Capa «componentes» del tema:
   usa SOLO tokens de ak-tokens.css (claro/oscuro y temporadas llegan solos).
   Móvil primero. Prefijo .akc-
   ===================================================================== */
@layer componentes {

  .akc { padding-bottom: var(--space-9); }
  .akc-h1 { font-family: var(--font-display); font-size: var(--step-3); line-height: var(--leading-tight); margin: 0 0 var(--space-4); color: var(--text); }
  .akc-h2 { font-family: var(--font-text); font-size: var(--step-1); font-weight: var(--weight-black); margin: var(--space-6) 0 var(--space-4); color: var(--text); }
  .akc-h3 { font-family: var(--font-text); font-size: var(--step-0); font-weight: var(--weight-black); margin: 0 0 var(--space-3); color: var(--text); }
  .akc-help { font-size: var(--step--1); color: var(--text-muted); margin: var(--space-2) 0 0; }
  .akc-label { display: block; font-size: var(--step--1); font-weight: var(--weight-bold); color: var(--text-2); margin-bottom: 6px; }
  .akc-req, .akc-opt { font-weight: var(--weight-regular); color: var(--text-muted); }
  .akc-solo { padding-top: var(--space-6); }
  .akc-back { margin: 0 0 var(--space-4); font-size: var(--step--1); }
  .akc-back a { display: inline-flex; align-items: center; gap: 6px; color: var(--text-2); text-decoration: none; font-weight: var(--weight-bold); }
  .akc-back a:hover { color: var(--link); }

  /* ---------- Cabecera de la comunidad ---------- */
  .akc-head { border-bottom: 1px solid var(--rule); background: var(--bg-subtle); }
  .akc-head-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding-block: var(--space-4); }
  .akc-head-txt .ak-eyebrow { margin-bottom: 2px; }
  .akc-head-title { margin: 0; font-family: var(--font-display); font-size: var(--step-2); font-weight: 600; line-height: 1.1; }
  .akc-head-title a { color: var(--text); text-decoration: none; }
  .akc-head-actions { display: flex; align-items: center; gap: var(--space-2); }
  .akc-head-link {
    display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 4px 12px 4px 4px;
    border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--surface);
    color: var(--text-2); font-weight: var(--weight-bold); font-size: var(--step--1); text-decoration: none;
  }
  .akc-head-link:hover { border-color: var(--border-strong); color: var(--text); }
  .akc-head-link > .ak-icon { width: 20px; height: 20px; margin-left: 8px; }
  .akc-feed-title { font-size: var(--step-2); margin: var(--space-5) 0 var(--space-4); max-width: 28ch; }

  /* Campana (cabecera del tema y de la comunidad) */
  .akc-bell {
    position: relative; display: inline-grid; place-items: center; flex: none;
    width: 40px; height: 40px; border-radius: 50%;
    border: 1px solid var(--border); background: var(--surface); color: var(--text);
    text-decoration: none;
  }
  .akc-bell:hover { border-color: var(--border-strong); color: var(--text); }
  .akc-bell .ak-icon { width: 20px; height: 20px; }
  .akc-bell-n {
    position: absolute; top: -4px; right: -6px; min-width: 20px; height: 20px; padding: 0 5px;
    display: grid; place-items: center; border-radius: var(--radius-pill);
    background: var(--accent); color: var(--on-accent); font-size: .72rem; line-height: 1; border: 2px solid var(--bg);
  }

  /* ---------- Maquetación ---------- */
  .akc-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); padding-top: var(--space-2); }
  .akc-col { min-width: 0; }
  .akc-side { display: none; }
  @media (min-width: 1024px) {
    .akc-layout { grid-template-columns: minmax(0, 1fr) 320px; gap: var(--space-7); max-width: 1120px; }
    .akc-side { display: flex; flex-direction: column; gap: var(--space-5); position: sticky; top: calc(var(--header-h) + var(--space-5)); align-self: start; padding-top: var(--space-5); }
    .akc-layout--single .akc-col { padding-top: var(--space-5); }
  }

  /* ---------- Avatar (iniciales + Gravatar transparente encima) ---------- */
  .akc-avatar { position: relative; width: var(--akc-av, 40px); height: var(--akc-av, 40px); font-size: calc(var(--akc-av, 40px) * .36); }
  .akc-avatar > span { position: relative; z-index: 0; }
  .akc-avatar img { position: absolute; inset: 0; z-index: 1; }

  /* ---------- Formulario de publicación ---------- */
  .akc-composer { padding: var(--space-4); margin-bottom: var(--space-5); }
  .akc-composer-top { display: flex; gap: var(--space-3); align-items: flex-start; }
  .akc-composer-top > .ak-avatar { display: none; }
  .akc-composer-main { flex: 1; min-width: 0; }
  .akc-composer-t { font-family: var(--font-text); font-size: var(--step-0); font-weight: var(--weight-black); margin: 4px 0 var(--space-2); }
  .akc-composer textarea, .akc-reply-form textarea { width: 100%; resize: vertical; min-height: 96px; font-size: var(--step-0); }
  .akc-composer.is-compact textarea { min-height: 56px; }
  .akc-composer.is-compact .akc-composer-more, .akc-composer.is-compact .akc-help { display: none; }
  .akc-composer-more { margin-top: var(--space-4); display: grid; gap: var(--space-4); }
  .akc-composer-row { display: grid; gap: var(--space-4); }
  .akc-field select, .akc-field input[type="text"] { width: 100%; }
  @media (min-width: 640px) {
    .akc-composer { padding: var(--space-5); }
    .akc-composer-top > .ak-avatar { display: inline-grid; }
    .akc-composer-row { grid-template-columns: 1fr 1.4fr; }
  }
  .akc-images { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
  .akc-images .akc-help { margin: 0; flex-basis: 100%; }
  .akc-file { cursor: pointer; }
  .akc-file:focus-within { outline: 3px solid var(--focus); outline-offset: 3px; }
  .akc-previews { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
  .akc-previews:empty { display: none; }
  .akc-previews li { position: relative; width: 84px; height: 84px; margin: 0; border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--border); background: var(--surface-2); }
  .akc-previews img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .akc-previews li.is-loading::after { content: "Subiendo…"; position: absolute; inset: 0; display: grid; place-items: center; font-size: var(--step--2); background: color-mix(in srgb, var(--surface) 75%, transparent); color: var(--text); }
  .akc-previews button {
    position: absolute; top: 4px; right: 4px; width: 28px; height: 28px; border-radius: 50%; border: 0; padding: 0;
    display: grid; place-items: center; background: var(--overlay); color: #fff; cursor: pointer;
  }
  .akc-previews button .ak-icon { width: 14px; height: 14px; }
  .akc-check { display: flex; gap: 10px; align-items: flex-start; font-size: var(--step--1); color: var(--text-2); }
  .akc-check input { margin-top: .2em; flex: none; }
  .akc-check a { color: var(--link); }
  .akc-form-foot { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-4); margin-top: var(--space-3); }
  .akc-counter { font-size: var(--step--2); color: var(--text-muted); margin-right: auto; }
  .akc-counter.is-over { color: var(--danger); }
  .akc-error { margin: var(--space-3) 0 0; padding: 10px 14px; border-radius: var(--radius-sm); background: var(--danger-bg); color: var(--danger); font-size: var(--step--1); font-weight: var(--weight-bold); }
  .akc-ok { margin: var(--space-3) 0 0; padding: 10px 14px; border-radius: var(--radius-sm); background: var(--success-bg); color: var(--success); font-size: var(--step--1); font-weight: var(--weight-bold); }
  .akc-flash { margin: var(--space-4) 0 0; padding: 12px 16px; border-radius: var(--radius-sm); font-weight: var(--weight-bold); font-size: var(--step--1); }
  .akc-flash.is-ok { background: var(--success-bg); color: var(--success); }
  .akc-flash.is-error { background: var(--danger-bg); color: var(--danger); }

  /* ---------- Barra de orden, búsqueda y temas ---------- */
  .akc-toolbar { display: flex; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-3); }
  @media (min-width: 720px) { .akc-toolbar { flex-direction: row; align-items: center; justify-content: space-between; } }
  .akc-tabs { display: flex; gap: 2px; padding: 3px; border-radius: var(--radius-pill); background: var(--surface-2); border: 1px solid var(--border); align-self: flex-start; max-width: 100%; overflow-x: auto; }
  .akc-tabs a {
    padding: 8px 14px; border-radius: var(--radius-pill); white-space: nowrap;
    font-size: var(--step--1); font-weight: var(--weight-bold); color: var(--text-2); text-decoration: none;
  }
  .akc-tabs a:hover { color: var(--text); }
  .akc-tabs a[aria-current="page"] { background: var(--surface); color: var(--text); box-shadow: var(--shadow-1); }
  .akc-search { position: relative; display: flex; flex: 1; max-width: 340px; width: 100%; }
  .akc-search input[type="search"] { width: 100%; padding-right: 44px; border-radius: var(--radius-pill); min-height: 42px; }
  .akc-search-btn { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border: 0; border-radius: 50%; background: transparent; color: var(--text-2); display: grid; place-items: center; }
  .akc-search-btn:hover { background: var(--surface-2); color: var(--text); }
  .akc-topics { display: flex; gap: var(--space-2); overflow-x: auto; padding: 2px 2px var(--space-3); margin-bottom: var(--space-3); scrollbar-width: thin; }
  .akc-topics .ak-chip { white-space: nowrap; flex: none; }
  .akc-topics .ak-chip[aria-current="page"] { background: var(--text); color: var(--bg); border-color: var(--text); }
  .akc-results { font-size: var(--step--1); color: var(--text-2); margin: 0 0 var(--space-3); }
  .akc-results a { color: var(--link); }

  /* ---------- Feed ---------- */
  .akc-feed { display: flex; flex-direction: column; gap: var(--space-4); }
  .akc-feed.is-loading { opacity: .55; transition: opacity var(--dur-base); }
  .akc-more { display: flex; justify-content: center; margin: var(--space-5) 0 0; }
  .akc-empty { padding: var(--space-6); text-align: center; }
  .akc-empty-t { font-weight: var(--weight-black); font-size: var(--step-1); color: var(--text); margin: 0 0 var(--space-2); }
  .akc-empty-small { color: var(--text-muted); font-size: var(--step--1); }

  /* ---------- Publicación y respuesta ---------- */
  .akc-post {
    position: relative; background: var(--surface); color: var(--text);
    border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-1);
    padding: var(--space-4);
  }
  @media (min-width: 640px) { .akc-post { padding: var(--space-5); } }
  .akc-post.is-pinned { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
  .akc-post.is-hidden, .akc-reply.is-hidden { background: repeating-linear-gradient(135deg, var(--surface), var(--surface) 12px, var(--surface-2) 12px, var(--surface-2) 24px); }
  .akc-post.is-new, .akc-reply.is-new { animation: akc-new 1.6s var(--ease-out); }
  @keyframes akc-new { from { box-shadow: 0 0 0 3px var(--accent-soft); } to { box-shadow: var(--shadow-1); } }
  .akc-flags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--space-3); }
  .akc-author { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); }
  .akc-author-av { flex: none; text-decoration: none; }
  .akc-author-txt { min-width: 0; }
  .akc-author-line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0; line-height: 1.3; }
  .akc-name { font-weight: var(--weight-black); color: var(--text); text-decoration: none; }
  .akc-name:hover { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; }
  .akc-badge { font-size: var(--step--2); padding: 2px 8px; }
  .akc-meta { margin: 2px 0 0; font-size: var(--step--1); color: var(--text-muted); line-height: 1.3; }
  .akc-time-link { color: inherit; text-decoration: none; }
  .akc-time-link:hover { color: var(--link); text-decoration: underline; }
  .akc-tags { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin-bottom: var(--space-3); }
  .akc-topic {
    display: inline-flex; align-items: center; padding: 3px 10px; border-radius: var(--radius-pill);
    background: var(--info-bg); color: var(--info); font-size: var(--step--2); font-weight: var(--weight-black); text-decoration: none;
  }
  .akc-topic:hover { color: var(--info); text-decoration: underline; }
  .akc-lesson { display: inline-flex; align-items: center; gap: 6px; font-size: var(--step--2); font-weight: var(--weight-bold); color: var(--learn-ink); background: var(--learn); padding: 3px 10px; border-radius: var(--radius-pill); text-decoration: none; max-width: 100%; }
  .akc-lesson span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .akc-lesson:hover { color: var(--learn-ink); text-decoration: underline; }
  .akc-body { font-size: var(--step-0); line-height: var(--leading-body); color: var(--text); overflow-wrap: anywhere; }
  .akc-body p { margin: 0 0 .7em; }
  .akc-body p:last-child { margin-bottom: 0; }
  .akc-body a { color: var(--link); text-decoration: underline; text-underline-offset: 2px; }
  .akc-body.is-clamped { display: -webkit-box; -webkit-line-clamp: 8; -webkit-box-orient: vertical; overflow: hidden; }
  .akc-readmore { display: inline-block; margin-top: var(--space-2); font-size: var(--step--1); font-weight: var(--weight-black); color: var(--link); }
  .akc-edit-area { width: 100%; min-height: 120px; }
  .akc-edit-actions { display: flex; gap: var(--space-2); justify-content: flex-end; margin-top: var(--space-2); }

  /* Galería */
  .akc-gallery { display: grid; gap: 4px; margin-top: var(--space-3); border-radius: var(--radius-sm); overflow: hidden; grid-template-columns: 1fr 1fr; }
  .akc-gallery a { display: block; background: var(--surface-2); aspect-ratio: 4 / 3; }
  .akc-gallery img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .akc-gallery--1 { grid-template-columns: 1fr; }
  .akc-gallery--1 a { aspect-ratio: auto; max-height: 460px; }
  .akc-gallery--1 img { object-fit: contain; max-height: 460px; background: var(--surface-2); }
  .akc-gallery--3 a:first-child { grid-row: span 2; aspect-ratio: auto; }

  /* Acciones */
  .akc-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 2px; margin: var(--space-3) calc(var(--space-2) * -1) calc(var(--space-2) * -1); }
  .akc-actions-sp { flex: 1; }
  .akc-act {
    display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 6px 10px;
    border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--text-2);
    font: inherit; font-size: var(--step--1); font-weight: var(--weight-bold); text-decoration: none; cursor: pointer;
  }
  .akc-act:hover:not([disabled]) { background: var(--surface-2); color: var(--text); }
  .akc-act[disabled] { cursor: default; opacity: .7; }
  .akc-act .ak-icon { width: 18px; height: 18px; }
  .akc-act--icon { padding: 6px; width: 40px; justify-content: center; }
  .akc-useful[aria-pressed="true"] { color: var(--accent-text); background: var(--accent-soft); }
  .akc-useful[aria-pressed="true"] .ak-icon svg path { fill: currentColor; fill-opacity: .18; }
  .akc-count { font-size: var(--step--2); }
  .akc-best-btn[aria-pressed="true"] { color: var(--success); background: var(--success-bg); }

  /* Menú «…» */
  .akc-menu { position: relative; }
  .akc-menu > summary { list-style: none; }
  .akc-menu > summary::-webkit-details-marker { display: none; }
  .akc-menu-list {
    position: absolute; right: 0; top: calc(100% + 4px); z-index: var(--z-menu); min-width: 220px;
    list-style: none; margin: 0; padding: 6px; background: var(--surface-raised); border: 1px solid var(--border);
    border-radius: var(--radius-md); box-shadow: var(--shadow-3);
  }
  .akc-menu-list li { margin: 0; }
  .akc-menu-btn { display: block; width: 100%; text-align: left; padding: 10px 12px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--text); font: inherit; font-size: var(--step--1); font-weight: var(--weight-bold); cursor: pointer; }
  .akc-menu-btn:hover, .akc-menu-btn:focus-visible { background: var(--surface-2); }
  .akc-menu-sep { padding: 8px 12px 4px; border-top: 1px solid var(--border); margin-top: 4px; }
  .akc-menu-sep span { font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-muted); }

  /* ---------- Hilo ---------- */
  .akc-thread { margin-top: var(--space-5); }
  .akc-best-box { margin-bottom: var(--space-5); padding: var(--space-4); border-radius: var(--radius-md); background: var(--success-bg); border: 1px solid color-mix(in srgb, var(--success) 35%, transparent); }
  .akc-best-box .ak-eyebrow { color: var(--success); }
  .akc-best-box .ak-eyebrow::before { background: var(--success); }
  .akc-best-box .akc-reply { background: var(--surface); }
  .akc-best-goto { margin: var(--space-2) 0 0; font-size: var(--step--1); }
  .akc-best-goto a { color: var(--link); font-weight: var(--weight-bold); }
  .akc-replies, .akc-subreplies { list-style: none; margin: 0; padding: 0; }
  .akc-replies { display: flex; flex-direction: column; gap: var(--space-4); }
  .akc-group { margin: 0; }
  .akc-subreplies { display: flex; flex-direction: column; gap: var(--space-3); margin: var(--space-3) 0 0 18px; padding-left: var(--space-4); border-left: 2px solid var(--rule); }
  .akc-subreplies:empty { display: none; }
  .akc-subreplies > li { margin: 0; }
  @media (min-width: 640px) { .akc-subreplies { margin-left: 28px; } }
  .akc-reply {
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md);
    padding: var(--space-4); scroll-margin-top: calc(var(--header-h) + var(--space-5));
  }
  .akc-reply.is-best { border-color: color-mix(in srgb, var(--success) 50%, var(--border)); box-shadow: inset 4px 0 0 var(--success); }
  .akc-reply:target { box-shadow: 0 0 0 3px var(--accent-soft); }
  .akc-reply--gone { color: var(--text-muted); font-style: italic; background: var(--surface-2); padding: var(--space-3) var(--space-4); }
  .akc-reply--gone p { margin: 0; }
  .akc-reply .akc-body { font-size: var(--step-0); }
  .akc-replying { display: flex; align-items: center; gap: 6px; margin: calc(var(--space-2) * -1) 0 var(--space-2); font-size: var(--step--1); color: var(--text-muted); }
  .akc-replying a { color: var(--link); font-weight: var(--weight-bold); text-decoration: none; }
  .akc-replying .ak-icon { width: 14px; height: 14px; }
  .akc-reply-form { margin-top: var(--space-5); padding: var(--space-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-1); scroll-margin-top: calc(var(--header-h) + var(--space-5)); }
  .akc-reply-form--inline { margin-top: var(--space-3); box-shadow: none; background: var(--surface-2); }
  .akc-replying-to { margin: 0 0 var(--space-2); font-size: var(--step--1); color: var(--text-2); }
  .akc-link-btn { border: 0; background: none; padding: 0 4px; color: var(--link); font: inherit; font-weight: var(--weight-bold); text-decoration: underline; cursor: pointer; }
  .akc-notice { display: flex; gap: 8px; align-items: center; margin-top: var(--space-5); padding: var(--space-4); border-radius: var(--radius-md); background: var(--surface-2); color: var(--text-2); font-size: var(--step--1); }

  /* ---------- Perfil ---------- */
  .akc-profile { padding: var(--space-5); }
  .akc-profile-head { display: flex; align-items: center; gap: var(--space-4); }
  .akc-profile-name { font-family: var(--font-display); font-size: var(--step-2); line-height: 1.1; margin: 0 0 6px; }
  .akc-profile .akc-profile-name a { color: var(--text); text-decoration: none; }
  .akc-side .akc-profile-name { font-family: var(--font-text); font-size: var(--step-0); font-weight: var(--weight-black); }
  .akc-profile-badges { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
  .akc-profile-badges:empty { display: none; }
  .akc-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin: var(--space-4) 0 0; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
  .akc-stats .ak-stat { background: var(--surface); padding: var(--space-3); margin: 0; gap: 6px; }
  .akc-stats dd { margin: 0; font-size: var(--step-2); }
  @media (min-width: 720px) { .akc-layout--single .akc-stats { grid-template-columns: repeat(4, 1fr); } }
  .akc-profile-links { margin: var(--space-4) 0 0; font-size: var(--step--1); color: var(--text-muted); }
  .akc-profile-links a { color: var(--link); font-weight: var(--weight-bold); }
  .akc-profile-mod { margin: var(--space-4) 0 0; }
  .akc-prof-prefs { margin-top: var(--space-3); }
  .akc-side-rules { padding: var(--space-5); }
  .akc-side-rules p { margin: var(--space-4) 0 0; }
  .akc-prefs { padding: var(--space-5); display: grid; gap: var(--space-4); }
  .akc-prefs .akc-h2 { margin: 0; }

  /* ---------- Avisos ---------- */
  .akc-notifs-card { padding: var(--space-5); }
  .akc-card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-3); }
  .akc-card-head .akc-h1 { margin: 0; }
  .akc-notifs { list-style: none; margin: 0; padding: 0; }
  .akc-notif { margin: 0; border-top: 1px solid var(--border); }
  .akc-notif:first-child { border-top: 0; }
  .akc-notif a { display: flex; gap: var(--space-3); padding: var(--space-3) var(--space-2); color: var(--text); text-decoration: none; border-radius: var(--radius-sm); }
  .akc-notif a:hover { background: var(--surface-2); }
  .akc-notif.is-unread a { background: color-mix(in srgb, var(--info-bg) 65%, transparent); }
  .akc-notif-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: var(--step--1); }
  .akc-notif-ex { color: var(--text-2); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .akc-new { color: var(--accent-text); font-weight: var(--weight-black); }
  .akc-pop {
    position: absolute; z-index: var(--z-menu); width: min(380px, calc(100vw - 24px)); max-height: 70vh; overflow: auto;
    background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-3); padding: var(--space-3);
  }
  .akc-pop-head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); padding: 4px 6px var(--space-2); }
  .akc-pop-head strong { font-size: var(--step-0); }
  .akc-pop-foot { padding: var(--space-2) 6px 4px; font-size: var(--step--1); }
  .akc-pop-foot a { color: var(--link); font-weight: var(--weight-bold); }

  /* ---------- Diálogo (reportar) ---------- */
  .akc-dialog { border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-raised); color: var(--text); padding: var(--space-5); width: min(480px, calc(100vw - 24px)); box-shadow: var(--shadow-3); }
  .akc-dialog::backdrop { background: var(--overlay); }
  .akc-dialog h2 { margin: 0 0 var(--space-3); font-family: var(--font-text); font-size: var(--step-1); font-weight: var(--weight-black); }
  .akc-dialog fieldset { border: 0; padding: 0; margin: 0 0 var(--space-4); display: grid; gap: var(--space-2); }
  .akc-dialog legend { font-weight: var(--weight-bold); margin-bottom: var(--space-2); color: var(--text-2); font-size: var(--step--1); }
  .akc-dialog textarea { width: 100%; min-height: 80px; }
  .akc-dialog-actions { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-4); }

  /* Aviso flotante (toast) */
  .akc-toast { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: var(--z-modal); padding: 12px 18px; border-radius: var(--radius-pill); background: var(--text); color: var(--bg); font-weight: var(--weight-bold); font-size: var(--step--1); box-shadow: var(--shadow-3); max-width: calc(100vw - 32px); }

  /* ---------- Normas y tarjetas sueltas ---------- */
  .akc-rules, .akc-center-card { padding: var(--space-6) var(--space-5); }
  .akc-rules-body { font-size: var(--step-0); line-height: var(--leading-body); color: var(--text); }
  .akc-rules-body ol { padding-left: 1.3em; display: grid; gap: var(--space-3); }
  .akc-rules-body li { margin: 0; }
  .akc-center-card form { margin: var(--space-4) 0; }

  /* ---------- Invitación (visitante) ---------- */
  .akc-invite { position: relative; overflow: hidden; min-height: 720px; }
  .akc-invite-preview { position: absolute; inset: 0; filter: blur(4px); opacity: .8; pointer-events: none; user-select: none; padding-top: var(--space-5); }
  .akc-invite-preview .akc-col { display: flex; flex-direction: column; gap: var(--space-4); }
  .akc-invite::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 0, color-mix(in srgb, var(--bg) 40%, transparent) 35%, var(--bg) 92%); pointer-events: none; }
  .akc-invite-front { padding-top: clamp(140px, 22vw, 220px); }
  .akc-invite-front { position: relative; z-index: 1; padding-block: var(--space-8) var(--space-7); }
  .akc-invite-card { padding: var(--space-6) var(--space-5); box-shadow: var(--shadow-3); max-width: 640px; margin-inline: auto; }
  @media (min-width: 640px) { .akc-invite-card { padding: var(--space-7); } }
  .akc-invite-h1 { font-family: var(--font-display); font-size: var(--step-4); line-height: var(--leading-tight); margin: 0 0 var(--space-4); }
  .akc-invite-list { margin: var(--space-5) 0; }
  .akc-invite-actions { margin-top: var(--space-5); }

  @media (max-width: 600px) {
    .akc-head-title { font-size: var(--step-1); }
    .akc-head-link { padding: 4px; }
    .akc-head-link > .ak-icon { margin: 0 6px; }
    .akc-feed-title { font-size: var(--step-1); }
    .akc-menu-list { min-width: 200px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .akc-post.is-new, .akc-reply.is-new { animation: none; }
  }
}