/* components.css — Reusable components of «A · Tinción». Tokens only (no colour literals, no inline styles). */

/* ---------- Generative art (the «ocular») ---------- */
.art { width: 100%; height: 100%; }
.art__field { fill: var(--art-field); }
.art__cyto { fill: var(--art-cyto); opacity: 0.55; }
.art__nucleus { fill: var(--pc); opacity: 0.85; }

/* ---------- Chips (pillar / tag / filter) ---------- */
.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; margin: 0; padding: 0; }
.chip {
  display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--touch-target); padding: 0 14px;
  border: 1px solid var(--color-control-border); border-radius: var(--radius-pill); background: var(--color-surface);
  font-family: var(--font-ui); font-size: 0.9rem; color: var(--color-text-primary); text-decoration: none; cursor: pointer;
}
.chip:hover { border-color: var(--color-text-primary); box-shadow: inset 0 0 0 1px var(--color-text-primary); }
.chip[aria-pressed="true"], .chip[aria-current="page"] { background: var(--color-text-primary); color: var(--color-text-inverse); border-color: var(--color-text-primary); }
.chip__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--pc); flex: none; }
.chip[aria-pressed="true"] .chip__dot, .chip[aria-current="page"] .chip__dot { box-shadow: 0 0 0 2px var(--color-bg); }
.chip__count { color: var(--color-text-secondary); font-size: var(--fs-xsmall); }
.chip[aria-pressed="true"] .chip__count, .chip[aria-current="page"] .chip__count { color: inherit; }
.chip--small { min-height: var(--touch-target); padding: 0 12px; font-size: var(--fs-xsmall); }
.chips--small { gap: 6px; }
.chips-nav { margin-block: var(--space-4); }

/* ---------- Labels inside cards (plain text, not links) ---------- */
.pillar-label { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--pc); }
.pillar-label::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--pc); flex: none; }
.source-badge { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; color: var(--color-text-primary); }
.source-badge .icon { width: 15px; height: 15px; color: var(--status-ok); }
.source-badge--preprint .icon { color: var(--status-warn); }
.source-badge--none, .source-badge--release { font-weight: 500; color: var(--color-text-secondary); }

/* ---------- Cards ---------- */
.grid { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--card-min)), 1fr)); }
.card {
  position: relative; display: flex; flex-direction: column; background: var(--color-surface);
  border: 1px solid var(--color-border); border-radius: var(--radius-card); overflow: hidden; box-shadow: var(--shadow-card);
}
.card:hover { border-color: var(--color-border-strong); }
.card__art {
  width: 92px; height: 92px; flex: none; border-radius: 50%; overflow: hidden; margin: 18px 18px 0;
  background: var(--art-field); box-shadow: 0 0 0 4px var(--color-surface), 0 0 0 5px var(--color-border);
}
.card__body { display: flex; flex-direction: column; gap: var(--space-2); padding: 18px; flex: 1; }
.card__kicker { margin: 0; font-size: var(--fs-xsmall); }
.card__title { font-family: var(--font-display); font-weight: var(--weight-heading); font-size: var(--fs-card); line-height: 1.22; margin: 0; }
.card__title a { color: inherit; text-decoration: none; }
.card__title a::after { content: ""; position: absolute; inset: 0; }
.card__title a:focus-visible { outline: none; }
.card:has(.card__title a:focus-visible) { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.card:hover .card__title a { text-decoration: underline; text-decoration-thickness: 1px; }
.card__excerpt { margin: 0; color: var(--color-text-secondary); font-size: 0.95rem; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 4; line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.card__meta { margin: auto 0 0; padding-top: var(--space-2); display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; font-size: var(--fs-xsmall); color: var(--color-text-secondary); }
.card--lead { border: 0; background: transparent; }
.card--lead .card__art { width: min(100%, 320px); height: auto; aspect-ratio: 1; margin: 0 0 var(--space-2); box-shadow: 0 0 0 6px var(--color-bg), 0 0 0 7px var(--color-border-strong); }
.card--lead .card__body { padding: var(--space-2) 0 0; }
.card--lead .card__title { font-size: var(--fs-lead); }
.card--lead .card__excerpt { font-size: 1.02rem; -webkit-line-clamp: 5; line-clamp: 5; }
@media (min-width: 760px) {
  .card--lead { display: grid; grid-template-columns: minmax(160px, 240px) 1fr; gap: 28px; align-items: center; }
  .card--lead .card__art { margin: 0; }
}

/* Compact row («Lo último», «Relacionado») */
.row-item { position: relative; display: grid; grid-template-columns: 56px 1fr; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--color-border); }
.row-item__body { min-width: 0; }
.row-item__art { width: 56px; height: 56px; border-radius: 50%; overflow: hidden; background: var(--art-field); }
.row-item__title { margin: 0 0 4px; font-family: var(--font-display); font-weight: var(--weight-heading); font-size: 1.02rem; line-height: 1.3; }
.row-item__title a { color: var(--color-text-primary); text-decoration: none; }
.row-item__title a::after { content: ""; position: absolute; inset: 0; }
.row-item:hover .row-item__title a { text-decoration: underline; }
.row-item__meta { margin: 0; font-size: var(--fs-xsmall); color: var(--color-text-secondary); display: flex; flex-wrap: wrap; gap: 4px 10px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 48px; padding: 0 22px;
  border-radius: var(--radius-pill); border: 1.5px solid transparent; font-family: var(--font-ui); font-weight: var(--weight-strong);
  font-size: 1rem; text-decoration: none; cursor: pointer; text-align: center;
}
.btn .icon { width: 20px; height: 20px; }
.btn--primary { background: var(--color-primary); color: var(--color-on-primary); }
.btn--primary:hover { background: var(--color-primary-strong); }
.btn--secondary { background: var(--color-surface); color: var(--color-text-primary); border-color: var(--color-control-border); }
.btn--secondary:hover { border-color: var(--color-text-primary); }
.btn--quiet { background: transparent; color: var(--color-link); border-color: var(--color-control-border); min-height: var(--touch-target); padding: 0 16px; font-size: var(--fs-small); }
.btn[disabled] { opacity: 0.6; cursor: progress; }

/* ---------- Search box ---------- */
.search { position: relative; max-width: 720px; }
.search__input {
  width: 100%; min-height: 56px; padding: 0 58px 0 48px; border-radius: var(--radius-input);
  border: 1.5px solid var(--color-control-border); background: var(--color-surface); font-size: 1.05rem;
}
.search__input::placeholder, .input::placeholder { color: var(--color-text-secondary); opacity: 1; }
.search__icon { position: absolute; left: 16px; top: 50%; translate: 0 -50%; color: var(--color-text-secondary); pointer-events: none; }
.search__icon .icon { width: 20px; height: 20px; }
.search__go {
  position: absolute; right: 6px; top: 50%; translate: 0 -50%; width: var(--touch-target); height: var(--touch-target);
  border-radius: var(--radius-input); border: 0; background: var(--color-primary); color: var(--color-on-primary); cursor: pointer;
  display: grid; place-items: center;
}
.search--small .search__input { min-height: 50px; font-size: 1rem; }

/* ---------- Notices (status trios) ---------- */
.notice { display: flex; gap: var(--space-3); align-items: flex-start; padding: 14px 16px; margin: var(--space-4) 0; border-radius: var(--radius-card); border: 1px solid var(--status-info-border); background: var(--status-info-bg); color: var(--color-text-primary); font-size: 0.95rem; }
.notice > .icon { width: 22px; height: 22px; margin-top: 1px; color: var(--status-info); }
.notice p { margin: 0; }
.notice__title { font-weight: var(--weight-strong); }
.notice__text p + p { margin-top: 2px; color: var(--color-text-secondary); }
.notice--warn { background: var(--status-warn-bg); border-color: var(--status-warn-border); }
.notice--warn > .icon { color: var(--status-warn); }
.notice--danger { background: var(--status-danger-bg); border-color: var(--status-danger-border); }
.notice--ok { background: var(--status-ok-bg); border-color: var(--status-ok-border); }

/* ---------- Newsletter call to action ---------- */
.cta { margin-block: var(--space-7); padding: var(--space-5); border: 1px solid var(--color-tldr-border); border-radius: var(--radius-card); background: var(--color-tldr-bg); }
.cta__title { font-family: var(--font-display); font-weight: var(--weight-heading); font-size: var(--fs-h3); margin: 0 0 var(--space-2); }
.cta__text { margin: 0 0 var(--space-4); color: var(--color-text-secondary); max-width: 60ch; }

/* ---------- Breadcrumb ---------- */
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: 0 var(--space-2); list-style: none; margin: 0 0 var(--space-3); padding: 0; font-size: var(--fs-small); color: var(--color-text-secondary); }
.breadcrumb li + li::before { content: "/"; margin-right: var(--space-2); color: var(--color-border-strong); }
.breadcrumb a { color: var(--color-text-secondary); display: inline-flex; align-items: center; min-height: var(--touch-target); }

/* ---------- Pagination and toggles ---------- */
.pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-3); margin-top: var(--space-6); }
.pagination__pages { display: flex; flex-wrap: wrap; gap: var(--space-1); list-style: none; margin: 0; padding: 0; }
.pagination__page { display: inline-grid; place-items: center; min-width: var(--touch-target); min-height: var(--touch-target); border-radius: var(--radius-pill); text-decoration: none; font-weight: 600; }
.pagination__page[aria-current="page"] { background: var(--color-text-primary); color: var(--color-text-inverse); }
.pagination__gap { display: inline-grid; place-items: center; min-width: 24px; color: var(--color-text-secondary); }
.toggle__list { display: inline-flex; list-style: none; margin: 0; padding: 3px; gap: 3px; border: 1px solid var(--color-control-border); border-radius: var(--radius-pill); background: var(--color-surface); }
.toggle__option { display: inline-flex; align-items: center; min-height: var(--touch-target); padding: 0 16px; border-radius: var(--radius-pill); text-decoration: none; color: var(--color-text-primary); font-size: var(--fs-small); font-weight: 600; }
.toggle__option[aria-current="true"] { background: var(--color-text-primary); color: var(--color-text-inverse); }

/* ---------- Switch (personalisation opt-in) ---------- */
.switch { display: inline-flex; align-items: center; gap: var(--space-3); min-height: var(--touch-target); cursor: pointer; font-weight: 600; }
.switch__input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch__label { line-height: 1.35; }
.switch__track { position: relative; flex: none; width: 46px; height: 28px; border-radius: var(--radius-pill); background: var(--color-surface); border: 1.5px solid var(--color-control-border); }
.switch__track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 19px; height: 19px; border-radius: 50%; background: var(--color-text-secondary); transition: transform 0.15s; }
.switch__input:checked + .switch__track { background: var(--color-primary); border-color: var(--color-primary); }
.switch__input:checked + .switch__track::after { transform: translateX(18px); background: var(--color-on-primary); }
.switch__input:focus-visible + .switch__track { outline: 3px solid var(--color-focus); outline-offset: 2px; }

/* ---------- Forms ---------- */
.form { display: flex; flex-direction: column; gap: var(--space-5); }
.field { display: flex; flex-direction: column; gap: var(--space-2); border: 0; padding: 0; margin: 0; min-width: 0; }
.field__label { font-weight: var(--weight-strong); font-size: 0.98rem; padding: 0; }
.field__optional, .field__hint { font-weight: 400; color: var(--color-text-secondary); font-size: var(--fs-small); margin: 0; }
.field__sublabel { margin: var(--space-2) 0 0; font-size: var(--fs-small); font-weight: 600; }
.field__error { margin: 0; color: var(--status-danger); font-weight: 600; font-size: var(--fs-small); }
.input, .select {
  min-height: 50px; padding: 0 14px; border-radius: var(--radius-input); border: 1.5px solid var(--color-control-border);
  background: var(--color-surface); font-size: 1rem; width: 100%; max-width: 480px;
}
.input[aria-invalid="true"] { border-color: var(--status-danger); }
.segmented { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.segmented__option { position: relative; }
.segmented__input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.segmented__option span { display: inline-flex; align-items: center; min-height: var(--touch-target); padding: 0 18px; border-radius: var(--radius-pill); border: 1.5px solid var(--color-control-border); background: var(--color-surface); }
.segmented__input:checked + span { background: var(--color-text-primary); color: var(--color-text-inverse); border-color: var(--color-text-primary); }
.segmented__input:focus-visible + span { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.choice-list { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; margin: 0; padding: 0; }
.choice { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--touch-target); padding: 0 14px 0 10px; border-radius: var(--radius-pill); border: 1px solid var(--color-control-border); background: var(--color-surface); cursor: pointer; font-size: 0.92rem; }
.choice:has(.choice__input:checked) { border-color: var(--color-text-primary); box-shadow: inset 0 0 0 1px var(--color-text-primary); background: var(--color-tldr-bg); }
.choice__input { width: 18px; height: 18px; margin: 0; accent-color: var(--color-primary); }
.check { display: flex; gap: var(--space-3); align-items: flex-start; min-height: var(--touch-target); padding-top: 10px; cursor: pointer; }
.check__input { width: 20px; height: 20px; margin: 2px 0 0; flex: none; accent-color: var(--color-primary); }
.form__trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form__actions { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.form__status:empty { display: none; }
.actions-row { display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* ---------- Property sheet (Obsidian-style) ---------- */
.props { font-size: 0.9rem; border: 1px solid var(--color-border); border-radius: var(--radius-card); background: var(--color-surface); padding: var(--space-4); }
.props__title { font-family: var(--font-ui); font-weight: 700; font-size: var(--fs-small); margin: 0 0 var(--space-3); color: var(--color-text-secondary); letter-spacing: 0.02em; }
.props dl { display: grid; grid-template-columns: minmax(84px, auto) 1fr; gap: var(--space-2) var(--space-3); margin: 0; }
.props dt { color: var(--color-text-secondary); display: flex; align-items: center; gap: 6px; }
.props dt .icon { width: 15px; height: 15px; }
.props dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }

/* ---------- Reading ---------- */
.prose { font-family: var(--font-read); font-size: var(--fs-read); line-height: var(--lh-read); max-width: var(--measure-read); overflow-wrap: anywhere; }
.prose h2 { font-family: var(--font-display); font-weight: var(--weight-heading); font-size: 1.45rem; line-height: 1.25; margin: 1.8em 0 0.6em; padding-top: 0.9em; border-top: 1px solid var(--color-border); }
.prose h3 { font-family: var(--font-display); font-size: 1.18rem; margin: 1.5em 0 0.5em; }
.prose p, .prose ul, .prose ol, .prose blockquote { margin: 0 0 1.1em; }
.prose blockquote { padding-left: var(--space-4); border-left: 3px solid var(--color-border-strong); color: var(--color-text-secondary); }
.prose code { font-size: 0.9em; background: var(--color-surface-sunken); padding: 1px 5px; border-radius: 4px; }
.table-wrap { overflow-x: auto; margin: 0 0 1.2em; }
.table-wrap table { border-collapse: collapse; font-family: var(--font-ui); font-size: 0.95rem; min-width: 100%; }
.table-wrap th, .table-wrap td { border-bottom: 1px solid var(--color-border); padding: 8px 12px; text-align: left; }
.tldr { background: var(--color-tldr-bg); border: 1px solid var(--color-tldr-border); border-radius: var(--radius-card); padding: 18px 20px; margin: var(--space-5) 0; max-width: var(--measure-read); }
.tldr__title { font-weight: 700; font-size: 0.95rem; margin: 0 0 10px; color: var(--color-tldr-title); }
.tldr ul { margin: 0; padding-left: 1.1em; font-size: 0.98rem; line-height: 1.55; }
.tldr li + li { margin-top: 6px; }
.faq { margin-top: var(--space-6); max-width: var(--measure-read); }
.faq__item { border-top: 1px solid var(--color-border); }
.faq__item:last-child { border-bottom: 1px solid var(--color-border); }
.faq__q { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: var(--touch-target); padding: 14px 0; cursor: pointer; list-style: none; font-family: var(--font-display); font-weight: var(--weight-heading); font-size: 1.08rem; }
.faq__q::-webkit-details-marker { display: none; }
.faq__q .icon { transition: transform 0.15s; color: var(--color-text-secondary); }
.faq__item[open] .faq__q .icon { transform: rotate(180deg); }
.faq__a { padding: 0 0 var(--space-4); }

/* ---------- Thematic index (explore page) ---------- */
.index-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0 var(--space-5); grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }
.index-list li { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); border-bottom: 1px solid var(--color-border); }
.index-list--tags { grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); }
.index-list__link { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--touch-target); font-weight: 600; }
.index-list__count { font-size: var(--fs-xsmall); color: var(--color-text-secondary); white-space: nowrap; }