:root{
  --ink: #0B2E4F;
  --paper: #F4F6F8;
  --paper-dim: #E3E9EE;
  --line: #C7D1DA;
  --stamp: #C8102E;
  --gold: #B5772A;
  --green: #1E7A4C;
  --display: "Newsreader", Georgia, serif;
  --body: "Source Sans 3", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;
}

*{ box-sizing: border-box; }

html{ scroll-behavior: smooth; }

body{
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  line-height: 1.5;
}

a{ color: inherit; }

/* ---------- masthead ---------- */
.masthead{
  border-bottom: 3px solid var(--ink);
  background: var(--paper);
}
.masthead__inner{
  max-width: 880px;
  margin: 0 auto;
  padding: 28px 20px 18px;
  display: flex;
  align-items: flex-end;
  gap: 16px;
}
.masthead__mark{
  font-size: 2rem;
  line-height: 1;
  color: var(--stamp);
  transform: translateY(2px);
}
.masthead__titles{ flex: 1; }
.masthead__eyebrow{
  margin: 0 0 4px;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #6b6455;
}
.masthead__title{
  margin: 0;
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(2rem, 5vw, 2.9rem);
  letter-spacing: -0.01em;
}
.masthead__status{
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 0.75rem;
  color: #4a4638;
  white-space: nowrap;
  padding-bottom: 6px;
}
.masthead__dot{
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 3px rgba(30,122,76,0.15);
}
.masthead__dot.stale{ background: var(--gold); box-shadow: 0 0 0 3px rgba(181,119,42,0.18); }
.masthead__dot.error{ background: var(--stamp); box-shadow: 0 0 0 3px rgba(200,16,46,0.18); }

/* ---------- toolbar ---------- */
.toolbar{
  position: sticky; top: 0; z-index: 10;
  background: rgba(244,246,248,0.92);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line);
}
.toolbar__inner{
  max-width: 880px; margin: 0 auto; padding: 14px 20px;
  display: flex; flex-direction: column; gap: 12px;
}
.toolbar__row{ display: flex; gap: 10px; }
.search{
  flex: 1;
  border: 1px solid var(--line);
  background: #fff;
  padding: 10px 14px;
  font-family: var(--body);
  font-size: 0.95rem;
  border-radius: 3px;
  color: var(--ink);
}
.search:focus{ outline: 2px solid var(--stamp); outline-offset: 1px; }

.print-btn{
  flex-shrink: 0;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  padding: 0 16px;
  border-radius: 3px;
  cursor: pointer;
}
.print-btn:hover{ background: #2e3a4d; }

.print-title{ display: none; }

.chips{ display: flex; flex-wrap: wrap; gap: 8px; }
.filter-group{ display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.filter-group__label{
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #6b6455;
  flex-shrink: 0;
  min-width: 62px;
}
.chip{
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  border: 1px solid var(--ink);
  background: transparent;
  color: var(--ink);
  padding: 5px 10px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.chip:hover{ background: var(--paper-dim); }
.chip[aria-pressed="true"]{
  background: var(--ink);
  color: var(--paper);
}

.region-select{
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  border: 1px solid var(--ink);
  background: #fff;
  color: var(--ink);
  padding: 6px 10px;
  border-radius: 4px;
  cursor: pointer;
}
.region-select:focus{ outline: 2px solid var(--stamp); outline-offset: 1px; }

/* ---------- feed ---------- */
.feed{
  max-width: 880px;
  margin: 0 auto;
  padding: 10px 20px 60px;
}
.feed__empty{
  font-family: var(--mono);
  font-size: 0.85rem;
  color: #6b6455;
  padding: 40px 0;
  text-align: center;
}

.day{ margin-top: 30px; }
.day:first-child{ margin-top: 6px; }
.day__label{
  margin: 0 0 4px;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 10px;
}
.day__label::after{
  content: "";
  flex: 1;
  height: 1px;
  background: var(--ink);
}

.clip{
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  border-left: 3px solid var(--ink);
  padding: 16px 18px;
  margin-top: 14px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px 16px;
}

.clip__masthead{
  grid-column: 1 / -1;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #6b6455;
  border-bottom: 1px dotted var(--line);
  padding-bottom: 8px;
  margin-bottom: 4px;
}
.clip__source{ font-weight: 600; color: var(--ink); }
.clip__time{ white-space: nowrap; }

.clip__headline{
  grid-column: 1 / -1;
  margin: 0 0 6px;
  font-family: var(--display);
  font-weight: 500;
  font-size: 1.18rem;
  line-height: 1.32;
}
.clip__headline a{ text-decoration: none; }
.clip__headline a:hover{ text-decoration: underline; text-decoration-color: var(--stamp); }

.clip__summary{
  grid-column: 1 / -1;
  margin: 0 0 10px;
  font-size: 0.92rem;
  color: #423f34;
}

.clip__tags{ grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; }
.stamp{
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 1px dashed var(--stamp);
  color: var(--stamp);
  padding: 2px 7px;
  border-radius: 2px;
  transform: rotate(-1deg);
  display: inline-block;
}
.clip.is-new::after{
  content: "NUEVO";
  position: absolute;
  top: -9px; right: 12px;
  background: var(--gold);
  color: var(--paper);
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.06em;
  padding: 1px 8px;
  border-radius: 2px;
}

/* ---------- footer ---------- */
.colophon{
  max-width: 880px;
  margin: 0 auto;
  padding: 24px 20px 50px;
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 0.72rem;
  color: #6b6455;
}

@media (max-width: 560px){
  .toolbar__row{ flex-direction: column; }
  .masthead__inner{ flex-wrap: wrap; }
  .masthead__status{ order: 3; padding-bottom: 0; }
}

/* ---------- impresión / exportar a PDF ---------- */
@media print{
  .no-print{ display: none !important; }
  body{ background: #fff; }
  .masthead{ border-bottom: 2px solid #000; }
  .print-title{
    display: block;
    max-width: 880px;
    margin: 10px auto 0;
    padding: 0 20px;
    font-family: var(--mono);
    font-size: 0.75rem;
    color: #444;
  }
  .day{ break-inside: avoid-page; margin-top: 18px; }
  .clip{
    break-inside: avoid-page;
    box-shadow: none;
    border: 1px solid #999;
    border-left: 3px solid #000;
  }
  .stamp{ color: #000; border-color: #000; }
}