/* tareas.etc.marketing — one stylesheet, no JavaScript. Tokens per DESIGN.md (OKLCH, light theme, restrained). */
:root {
  --bg: oklch(0.975 0.006 75);
  --surface: oklch(0.995 0.003 75);
  --surface-2: oklch(0.955 0.008 75);
  --line: oklch(0.88 0.01 75);
  --line-strong: oklch(0.78 0.012 75);
  --ink: oklch(0.24 0.02 60);
  --ink-2: oklch(0.44 0.02 60);
  --accent: oklch(0.48 0.14 40);
  --accent-hover: oklch(0.43 0.14 40);
  --accent-soft: oklch(0.94 0.03 40);
  --accent-ink: oklch(0.995 0 0);
  --link: oklch(0.42 0.11 255);
  --danger: oklch(0.46 0.16 25);
  --danger-hover: oklch(0.41 0.16 25);
  --danger-soft: oklch(0.95 0.03 25);
  --danger-ink: oklch(0.34 0.14 25);
  --ok-soft: oklch(0.95 0.04 150);
  --ok-ink: oklch(0.36 0.1 150);
  --info-soft: oklch(0.95 0.03 255);
  --info-ink: oklch(0.36 0.1 255);
  --radius: 8px;
  --radius-s: 6px;
  --control: 36px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --t: 150ms;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", sans-serif;
  font-size: 16px;
  line-height: 1.55;
  -webkit-text-size-adjust: 100%;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); }
a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--ink); }
h1, h2, h3 { text-wrap: balance; font-weight: 600; line-height: 1.25; color: var(--ink); }
h1 { font-size: 1.73rem; margin: 0 0 4px; }
h2 { font-size: 1.2rem; margin: 0 0 12px; }
h3 { font-size: 1rem; margin: 20px 0 8px; }
p { margin: 0 0 8px; }
b, strong { font-weight: 600; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .875em; background: var(--surface-2); padding: 1px 5px; border-radius: 4px; color: var(--ink); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }

.wrap { max-width: 1040px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
main.wrap { padding-block: 32px 64px; }

/* top bar: a surface band with a hairline, never a colored block */
.top { background: var(--surface); border-bottom: 1px solid var(--line); }
.bar { display: flex; align-items: center; gap: 24px; min-height: 56px; }
.brand { color: var(--ink); font-weight: 700; text-decoration: none; letter-spacing: -0.01em; font-size: 1.05rem; }
.brand:hover { color: var(--accent); }
.nav { display: flex; gap: 20px; flex: 1; }
.nav a { color: var(--ink-2); text-decoration: none; font-size: .95rem; padding: 16px 0; border-bottom: 2px solid transparent; transition: color var(--t) var(--ease); }
.nav a:hover { color: var(--ink); }
.nav a[aria-current] { color: var(--ink); border-bottom-color: var(--accent); }
.session { display: flex; align-items: center; gap: 12px; margin: 0 0 0 auto; }
.who { font-size: .9rem; color: var(--ink-2); }

/* page header */
.sub { color: var(--ink-2); margin: 0 0 24px; max-width: 70ch; }
.crumb { margin: 0 0 12px; font-size: .9rem; }
.crumb a { color: var(--ink-2); text-decoration: none; }
.crumb a:hover { color: var(--ink); text-decoration: underline; }

/* flash / notes / errors: quiet bands, no side stripes */
.flash { background: var(--info-soft); color: var(--info-ink); border: 1px solid var(--line); padding: 10px 14px; border-radius: var(--radius); margin: 0 0 24px; }
.flash-error, .error { background: var(--danger-soft); color: var(--danger-ink); border: 1px solid var(--line); padding: 10px 14px; border-radius: var(--radius); margin: 0 0 12px; }
.note { background: var(--surface-2); border: 1px solid var(--line); padding: 10px 14px; border-radius: var(--radius); margin: 0 0 12px; }
.hint { color: var(--ink-2); font-size: .875rem; }
p.hint { margin: 4px 0; }

/* buttons: one shape everywhere */
.btn { font: inherit; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; min-height: var(--control); padding: 0 16px; border-radius: var(--radius-s); border: 1px solid var(--accent); background: var(--accent); color: var(--accent-ink); text-decoration: none; transition: background-color var(--t) var(--ease), border-color var(--t) var(--ease), color var(--t) var(--ease); }
.btn:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn:active { box-shadow: inset 0 1px 0 oklch(0 0 0 / .18); }
.btn-primary { background: var(--accent); border-color: var(--accent); }
.btn-quiet, .btn-light, .btn-secondary { background: var(--surface); color: var(--ink); border-color: var(--line-strong); }
.btn-quiet:hover, .btn-light:hover, .btn-secondary:hover { background: var(--surface-2); border-color: var(--line-strong); color: var(--ink); }
.btn-quiet { min-height: 32px; padding: 0 12px; font-weight: 500; }
.btn-danger { background: var(--danger); border-color: var(--danger); color: var(--accent-ink); }
.btn-danger:hover { background: var(--danger-hover); border-color: var(--danger-hover); }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

/* state pills: dark text on a light tint, text always names the state (AA ≥ 4.5:1) */
.pill { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: .8rem; font-weight: 600; line-height: 1.4; white-space: nowrap; border: 1px solid transparent; }
.pill-recibida   { background: oklch(0.93 0.008 75);  color: oklch(0.38 0.02 60);  border-color: oklch(0.86 0.01 75); }
.pill-clasificada{ background: oklch(0.94 0.03 255);  color: oklch(0.36 0.1 255);  border-color: oklch(0.86 0.05 255); }
.pill-falta_info { background: oklch(0.95 0.05 80);   color: oklch(0.38 0.1 70);   border-color: oklch(0.86 0.09 80); }
.pill-lista      { background: oklch(0.95 0.045 150); color: oklch(0.36 0.1 150);  border-color: oklch(0.86 0.08 150); }
.pill-en_ejecucion { background: oklch(0.94 0.04 300); color: oklch(0.37 0.12 300); border-color: oklch(0.86 0.07 300); }
.pill-en_revision{ background: oklch(0.94 0.04 200);  color: oklch(0.35 0.09 200); border-color: oklch(0.85 0.07 200); }
.pill-fallida    { background: oklch(0.94 0.04 25);   color: oklch(0.38 0.14 25);  border-color: oklch(0.86 0.08 25); }
.pill-aprobada   { background: oklch(0.93 0.06 140);  color: oklch(0.34 0.11 140); border-color: oklch(0.84 0.1 140); }
.pill-desplegando{ background: oklch(0.93 0.05 240);  color: oklch(0.34 0.11 240); border-color: oklch(0.84 0.09 240); }
.pill-hecha      { background: oklch(0.42 0.11 150);  color: oklch(0.995 0 0);     border-color: oklch(0.42 0.11 150); }
.pill-pospuesta  { background: oklch(0.94 0.035 330); color: oklch(0.37 0.11 330); border-color: oklch(0.86 0.06 330); }
.pill-rechazada  { background: oklch(0.42 0.02 260);  color: oklch(0.995 0 0);     border-color: oklch(0.42 0.02 260); }

/* board: filters as a plain row, chips as underlined links, groups as headed lists */
.filters { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: flex-end; margin: 0 0 20px; padding: 0 0 20px; border-bottom: 1px solid var(--line); }
.filters label { display: flex; flex-direction: column; gap: 4px; font-size: .8rem; color: var(--ink-2); }
.filters select { font: inherit; min-height: var(--control); padding: 0 32px 0 10px; border: 1px solid var(--line-strong); border-radius: var(--radius-s); background: var(--surface); color: var(--ink); min-width: 170px; }
.filters a { align-self: center; font-size: .9rem; }
.chips { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 22px; padding: 0; margin: 0 0 28px; }
.chips a { text-decoration: none; display: inline-flex; gap: 6px; align-items: baseline; color: var(--ink-2); padding: 6px 0; border-bottom: 2px solid transparent; transition: color var(--t) var(--ease), border-color var(--t) var(--ease); }
.chips a:hover { color: var(--ink); }
.chips .on a { color: var(--ink); border-bottom-color: var(--accent); }
.chips .n { font-variant-numeric: tabular-nums; font-size: .85rem; color: var(--ink-2); }
.chips .pill { background: transparent; border-color: transparent; color: inherit; padding: 0; font-size: .95rem; font-weight: 500; }
.chips .on .pill { font-weight: 600; }

.group { margin: 0 0 36px; }
.group > header { display: flex; align-items: baseline; gap: 10px; margin: 0 0 10px; }
.group > header h2 { margin: 0; }
.group .count { color: var(--ink-2); font-variant-numeric: tabular-nums; font-size: .95rem; }
.tasks { list-style: none; margin: 0; padding: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.task { display: grid; grid-template-columns: 3.6rem 1fr auto; gap: 2px 14px; padding: 13px 16px; border-top: 1px solid var(--line); align-items: start; transition: background-color var(--t) var(--ease); }
.task:first-child { border-top: 0; }
.task:hover { background: var(--surface-2); }
.task .id { font-weight: 600; font-variant-numeric: tabular-nums; text-decoration: none; color: var(--ink-2); padding-top: 1px; }
.task .main { min-width: 0; }
.task .title { display: block; color: var(--ink); text-decoration: none; font-weight: 600; overflow-wrap: anywhere; text-wrap: pretty; }
.task .title:hover { text-decoration: underline; }
.meta { color: var(--ink-2); font-size: .875rem; display: flex; flex-wrap: wrap; gap: 2px 14px; margin-top: 3px; }
.meta b { color: var(--ink); font-weight: 600; }
.task .side { text-align: right; font-size: .85rem; color: var(--ink-2); white-space: nowrap; line-height: 1.7; }
.badge { font-size: .75rem; border: 1px solid var(--line-strong); border-radius: 4px; padding: 0 6px; background: var(--surface); color: var(--ink-2); }
.badge-warn { background: var(--danger-soft); color: var(--danger-ink); border-color: var(--line-strong); }
.empty { background: var(--surface); border: 1px dashed var(--line-strong); border-radius: var(--radius); padding: 28px; color: var(--ink-2); text-align: center; max-width: 70ch; }
.pager { display: flex; gap: 16px; align-items: center; justify-content: center; margin-top: 12px; color: var(--ink-2); }

/* login + small standalone surfaces */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; max-width: 400px; margin: 48px auto; }
.card.wide { max-width: 640px; margin-top: 16px; }
.card h1 { font-size: 1.44rem; }
.card form { display: flex; flex-direction: column; gap: 16px; margin-top: 8px; }
.card label { display: flex; flex-direction: column; gap: 6px; font-size: .9rem; font-weight: 500; }
.card input[type=text], .card input[type=password] { font: inherit; min-height: var(--control); padding: 0 12px; border: 1px solid var(--line-strong); border-radius: var(--radius-s); background: var(--surface); color: var(--ink); }
.card .btn { align-self: flex-start; min-width: 140px; }

/* detail page: a header, then sections separated by headings and hairlines (no boxes in boxes) */
.head { padding: 0 0 20px; margin: 0 0 8px; border-bottom: 1px solid var(--line); }
.head h1 { overflow-wrap: anywhere; font-size: 1.44rem; }
.meta.big { font-size: .92rem; align-items: center; gap: 6px 16px; margin: 8px 0 0; }
.head .error, .head .note { margin: 12px 0 0; }
.block { padding: 24px 0; border-bottom: 1px solid var(--line); }
.block:last-child { border-bottom: 0; }
.block h2 { margin: 0 0 12px; }
.block.actions { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; margin: 20px 0 4px; }
ul.plain { list-style: none; margin: 0; padding: 0; max-width: 75ch; }
ul.plain li { padding: 6px 0; border-top: 1px solid var(--line); overflow-wrap: anywhere; }
ul.plain li:first-child { border-top: 0; }
pre { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .8rem; line-height: 1.5; margin: 0; padding: 12px 14px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); overflow: auto; max-height: 520px; white-space: pre; }
pre.raw { white-space: pre-wrap; overflow-wrap: anywhere; font-family: inherit; font-size: 1rem; line-height: 1.6; background: var(--surface); max-width: 72ch; text-wrap: pretty; }
pre.log { max-height: 360px; }
pre.diff span { display: block; padding: 0 6px; margin: 0 -6px; }
.d-add { background: var(--ok-soft); color: var(--ok-ink); }
.d-del { background: var(--danger-soft); color: var(--danger-ink); }
.d-hunk { background: var(--info-soft); color: var(--info-ink); }
.d-meta { color: var(--ink-2); font-weight: 600; }
details > summary { cursor: pointer; color: var(--ink); }
details > summary:hover { color: var(--accent); }
details.attempt { border-top: 1px solid var(--line); padding: 12px 0; }
details.attempt:first-of-type { border-top: 0; padding-top: 0; }
details.attempt > summary { font-weight: 600; }
.shots { display: flex; flex-wrap: wrap; gap: 14px; margin: 12px 0; }
.shots a { display: block; width: 220px; text-decoration: none; font-size: .8rem; color: var(--ink-2); }
.shots img { display: block; width: 220px; height: 150px; object-fit: cover; object-position: top; border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--surface-2); margin-bottom: 4px; }
.files a { margin-right: 14px; font-size: .875rem; }
.timeline { list-style: none; margin: 0; padding: 0 0 0 18px; border-left: 1px solid var(--line); max-width: 75ch; }
.timeline li { position: relative; padding: 6px 0 12px; }
.timeline li::before { content: ""; position: absolute; left: -22px; top: 13px; width: 7px; height: 7px; border-radius: 50%; background: var(--line-strong); }
.timeline li:first-child::before { background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.timeline .move { color: var(--ink-2); font-size: .875rem; }
.reason { color: var(--ink); background: var(--surface-2); border-radius: var(--radius-s); padding: 6px 10px; margin-top: 6px; font-size: .875rem; white-space: pre-wrap; overflow-wrap: anywhere; max-width: 70ch; }

/* actions: a row of buttons; forms open inline under their button */
.acts { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start; }
.act { margin: 0; }
.act form { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; padding: 12px 0 4px; border-top: 1px solid var(--line); min-width: min(380px, 100%); }
.act summary.btn { display: inline-flex; list-style: none; }
.act summary.btn::-webkit-details-marker { display: none; }
.act[open] > summary.btn-secondary { background: var(--surface-2); border-color: var(--line-strong); }
.act label { display: flex; flex-direction: column; gap: 4px; font-size: .875rem; color: var(--ink-2); }
.act label.check { flex-direction: row; align-items: flex-start; gap: 8px; color: var(--ink); }
.act textarea { font: inherit; padding: 8px 10px; border: 1px solid var(--line-strong); border-radius: var(--radius-s); resize: vertical; color: var(--ink); background: var(--surface); }
.act form .btn { align-self: flex-start; }

/* settings: one row per site */
.sites .site { display: grid; grid-template-columns: 1fr auto; gap: 4px 20px; align-items: center; padding: 14px 16px; border-top: 1px solid var(--line); }
.sites .site:first-child { border-top: 0; }
.sites .title { font-weight: 600; color: var(--ink); }
.sites .side { display: block; margin: 0; text-align: right; white-space: normal; }
/* enabling a site is a secondary action (21 rows); only the destructive "back to manual" is solid */
.sites .side .btn:not(.btn-danger) { background: var(--surface); color: var(--ink); border-color: var(--line-strong); }
.sites .side .btn:not(.btn-danger):hover { background: var(--surface-2); }
.sites .main { min-width: 0; }
.problems li { font-size: .8rem; color: var(--danger-ink); }
.copy-url { font-family: ui-monospace, monospace; font-size: .9em; user-select: all; word-break: break-all; }

@media (max-width: 640px) {
  main.wrap { padding-block: 20px 48px; }
  .bar { gap: 14px; }
  .nav { gap: 14px; }
  .nav a { padding: 12px 0; }
  .who { display: none; }
  .brand { white-space: nowrap; }
  h1 { font-size: 1.44rem; }
  .head h1 { font-size: 1.2rem; }
  .sites .site { grid-template-columns: 1fr; }
  .sites .side { text-align: left; }
  .sites .side .btn { width: 100%; }
  .shots a, .shots img { width: 100%; }
  .shots img { height: auto; max-height: 220px; }
  .task { grid-template-columns: 3.2rem 1fr; }
  .task .side { grid-column: 2; text-align: left; white-space: normal; line-height: 1.5; margin-top: 4px; }
  .filters select { min-width: 0; width: 100%; }
  .filters label { flex: 1 1 140px; }
  .filters .btn { width: 100%; }
  .acts { flex-direction: column; align-items: stretch; }
  .act, .act summary.btn, .act form .btn, .act form { width: 100%; }
  .act summary.btn { justify-content: center; }
  .card { margin: 16px auto; padding: 20px; }
  .card .btn { align-self: stretch; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}