:root{
  --bg:#ffffff;
  --bg-soft:#f6f7f9;

  --card:#ffffff;
  --text:#0f172a;
  --muted:#475569;
  --muted-2:#64748b;

  --border:#e2e8f0;

  --accent:#2563eb;
  --accent-teal:#14b8a6;
  --accent-violet:#8b5cf6;
  --accent-amber:#f59e0b;
  --accent-rose:#fb7185;

  --focus: rgba(37,99,235,.22);

  --radius:16px;
  --radius-sm:12px;
  --shadow: 0 14px 35px rgba(2,6,23,.10);
  --shadow-sm: 0 8px 18px rgba(2,6,23,.12);

  --container:1240px;
  --sidebar:310px;
  --header-h:80px;

  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Inter, Arial, "Noto Sans", "Liberation Sans", sans-serif;
  --font-serif: ui-serif, Georgia, "Times New Roman", Times, "Noto Serif", "PT Serif", serif;
}
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{ margin:0; background: var(--bg); color: var(--text); font-family: var(--font-sans); line-height:1.55; }
a{ color: var(--accent); text-decoration:none; }
a:hover{ text-decoration: underline; }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible{
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: 10px;
}
hr{ border:none; border-top: 1px solid var(--border); margin: 24px 0; }
.container{ width:min(var(--container), calc(100% - 32px)); margin:0 auto; }

.header{
  position:sticky; top:0; z-index:50;
  height: var(--header-h);
  background: rgba(255,255,255,.86);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.header__inner{ height:100%; display:flex; align-items:center; gap:16px; }
.brand{ display:flex; align-items:baseline; gap:10px; min-width:260px; }
.brand__title{ font-family:var(--font-serif); font-weight:700; font-size:20px; color: var(--text); }
.brand a:hover{text-decoration: none;}
.brand__meta{ font-size:12px; color: var(--muted-2); white-space:nowrap; }
.header__actions{ display:flex; align-items:center; gap:10px; margin-left:auto; }

.search{ position:relative; width:min(420px, 44vw); margin: 0 0 0 auto;}
.search__icon{ position:absolute; left:12px; top:50%; transform:translateY(-50%); opacity:.65; }
.search input{
  width:100%;
  padding:10px 12px 10px 36px;
  border:1px solid var(--border);
  background:#fff;
  color: var(--text);
  border-radius: 999px;
  font-size:14px;
}

.btn{
  display:inline-flex; align-items:center; gap:8px;
  border:1px solid var(--border);
  background:#fff;
  color: var(--text);
  border-radius:999px;
  padding:10px 14px;
  font-size:14px;
  cursor:pointer;
  white-space:nowrap;
}
.btn:hover{ box-shadow: var(--shadow-sm); text-decoration:none; }
.btn--primary{
  border-color: rgba(37,99,235,.22);
  background: rgba(37,99,235,.10);
  color:#0b2a8a;
}
.btn--ghost{ background: transparent; }
.btn__dot{ width:8px; height:8px; border-radius:50%; background: var(--accent); box-shadow:0 0 0 6px rgba(37,99,235,.10); }

.icon-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:42px; height:42px;
  border-radius:999px;
  border:1px solid var(--border);
  background:#fff;
  color: var(--text);
  cursor:pointer;
}
.icon-btn:hover{ box-shadow: var(--shadow-sm); }

.layout{ display:grid; grid-template-columns: var(--sidebar) 1fr; gap:26px; padding:26px 0 56px; }
.sidebar{
  position:sticky;
  top: calc(var(--header-h) + 16px);
  height: calc(100dvh - var(--header-h) - 32px);
  overflow:auto;
  padding:14px;
  border:1px solid var(--border);
  background: var(--bg-soft);
  border-radius: var(--radius);
}
.sidebar__title{
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color: var(--muted-2);
  margin: 2px 0 12px;
}
.menu{ list-style:none; padding:0; margin:0; display:grid; gap:4px; }
.menu a{ display:block; padding:10px; border-radius:12px; color: var(--text); }
.menu a:hover{ background: rgba(255,255,255,.7); text-decoration:none; }
.menu__item--active > a{
  background:#fff;
  border:1px solid rgba(2,6,23,.06);
  box-shadow: 0 2px 10px rgba(2,6,23,.06);
}
.tags{ display:flex; flex-wrap:wrap; gap:8px; }
.tag{
  display:inline-flex; align-items:center;
  border: 1px solid rgba(37,99,235,.18);
  background: rgba(37,99,235,.07);
  color:#0b2a8a;
  font-size:12px;
  padding:6px 10px;
  border-radius:999px;
}
.tag--blue{ border-color: rgba(37,99,235,.22); background: rgba(37,99,235,.10); color:#0b2a8a; }
.tag--teal{ border-color: rgba(20,184,166,.22); background: rgba(20,184,166,.10); color:#065f56; }
.tag--violet{ border-color: rgba(139,92,246,.22); background: rgba(139,92,246,.10); color:#4c1d95; }
.tag--amber{ border-color: rgba(245,158,11,.26); background: rgba(245,158,11,.12); color:#7c2d12; }
.tag--rose{ border-color: rgba(251,113,133,.26); background: rgba(251,113,133,.12); color:#831843; }

.main{ min-width:0; }
.breadcrumbs{ display:flex; flex-wrap:wrap; gap:8px; font-size:13px; color: var(--muted-2); margin:2px 0 12px; }
.breadcrumbs a{ color: var(--muted-2); }
.breadcrumbs__sep{ opacity:.6; }
.h1{ font-family: var(--font-serif); font-size: clamp(26px, 3vw, 34px); line-height:1.15; margin:0 0 14px; }
.lead{ color: var(--muted); font-size:16px; margin: 0 0 18px; }

.grid{ display:grid; gap:16px; }
.grid--2{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3{ grid-template-columns: repeat(3, minmax(0, 1fr)); }

.card{
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px;
}
.card--accent{ position:relative; overflow:hidden; }
.card--accent::before{ content:""; position:absolute; inset:0 0 auto 0; height:4px; background: linear-gradient(90deg, var(--accent), transparent); opacity:.85; }
.card--accent[data-accent="teal"]::before{ background: linear-gradient(90deg, var(--accent-teal), transparent); }
.card--accent[data-accent="violet"]::before{ background: linear-gradient(90deg, var(--accent-violet), transparent); }
.card--accent[data-accent="amber"]::before{ background: linear-gradient(90deg, var(--accent-amber), transparent); }
.card--accent[data-accent="rose"]::before{ background: linear-gradient(90deg, var(--accent-rose), transparent); }

.card__title{ font-weight:800; font-size:16px; margin:0 0 6px; }
.card__meta{ font-size:13px; color: var(--muted-2); margin:0 0 10px; }
.card__actions{ display:flex; flex-wrap:wrap; gap:10px; margin-top:12px; }

.kpi{ display:grid; grid-template-columns: 1fr auto; gap:10px; align-items:start; }
.kpi__label{ font-size:12px; color: var(--muted-2); letter-spacing:.08em; text-transform:uppercase; }
.kpi__value{ font-family:var(--font-serif); font-size:24px; font-weight:700; line-height:1.1; }
.kpi__desc{ grid-column:1/-1; font-size:14px; color: var(--muted); margin-top:-4px; }

.prose{
  background:#fff;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
}
.prose h2{ font-family:var(--font-serif); font-size:20px; margin: 20px 0 10px; }
.prose p{ margin: 0 0 12px; }
.prose .note{ background: var(--bg-soft); border:1px solid var(--border); border-radius:12px; padding:12px; color: var(--muted); }

/* Covers carousel */
.covers{ margin: 10px 0 18px; }
.covers__head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px; }
.covers__title{ font-weight:800; color: var(--text); font-family: var(--font-serif); font-size:18px; }
.covers__controls{ display:flex; gap:10px; }
.covers__btn{
  width:42px; height:42px;
  border-radius:999px;
  border:1px solid var(--border);
  background: #fff;
  color: var(--text);
  cursor:pointer;
}
.covers__btn:hover{ box-shadow: var(--shadow-sm); }
.covers__rail{
  display:flex;
  gap:14px;
  overflow:auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 6px;
  scrollbar-width: thin;
}
.covers__rail::-webkit-scrollbar{ height:10px; }
.covers__rail::-webkit-scrollbar-thumb{ background: rgba(2,6,23,.18); border-radius:999px; }

.cover-card{
  flex: 0 0 auto;
  width: 160px;
  scroll-snap-align: start;
  border-radius: 16px;
  background: #fff;
  border: 1px solid var(--border);
  padding: 12px;
  box-shadow: var(--shadow-sm);
}
.cover{
  width:100%;
  aspect-ratio: 2/3;
  background:
    linear-gradient(180deg, rgba(2,6,23,.06), rgba(2,6,23,.02)),
    repeating-linear-gradient(0deg, rgba(2,6,23,.10), rgba(2,6,23,.10) 1px, transparent 1px, transparent 10px);
  border: 1px solid rgba(2,6,23,.10);
}

.cover_img,
.cover img{
  max-width:100%;
  max-height: width:100%;
}
.cover_img {
border: 1px solid #777;
  margin: 20px 0 50px 0;
  box-shadow: 7px 7px 9px #ddd;
}

.cover-meta{ margin-top:10px; display:grid; gap:6px; }
.cover-meta__top{ display:flex; justify-content:space-between; gap:10px; font-size:12px; color: var(--muted-2); }
.cover-meta__title{ font-size:13px; color: var(--text); font-weight:700; line-height:1.25; }
.cover-meta__link{ font-size:13px; color: var(--accent); }
.cover-meta__link:hover{ text-decoration: underline; }

.toolbar{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin: 14px 0 18px; }
.toolbar__grow{ flex: 1; }
.input{ width:100%; border:1px solid var(--border); border-radius: 12px; padding:10px 12px; font-size:14px; }

.chips{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{
  border: 1px solid var(--border);
  background: #fff;
  color: var(--text);
  font-size: 13px;
  padding: 8px 10px;
  border-radius: 999px;
  cursor:pointer;
}
.chip[data-active="true"]{
  border-color: rgba(37,99,235,.22);
  background: rgba(37,99,235,.10);
  color:#0b2a8a;
}

/* Accordion */
.accordion{ display:grid; gap:10px; }
details.accordion__item{
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background:#fff;
  box-shadow: var(--shadow);
  overflow:hidden;
}
summary.accordion__sum{ cursor:pointer; list-style:none; padding: 14px 16px; display:grid; gap:6px; }
summary.accordion__sum::-webkit-details-marker{ display:none; }
.accordion__title{ font-weight:800; font-size:15px; }
.accordion__meta{ font-size:13px; color: var(--muted); display:flex; flex-wrap:wrap; gap:8px; }
.accordion__body{ padding: 0 16px 16px; border-top:1px solid var(--border); }
.accordion__body p{ margin: 12px 0; color: var(--text); }

.footer{
  border-top: 1px solid var(--border);
  background: var(--bg-soft);
  padding: 26px 0;
}
.footer__grid{ display:grid; gap:16px; grid-template-columns: 1.6fr 1fr 1fr; }
.footer__title{ font-weight:800; margin:0 0 8px; color: var(--text); }
.footer__text{ margin:0; color: var(--muted); font-size:14px; }

.backdrop{
  position: fixed; inset:0;
  background: rgba(2,6,23,.45);
  z-index:60;
  opacity:0;
  pointer-events:none;
  transition: opacity .2s ease;
}
.backdrop[data-open="true"]{ opacity:1; pointer-events:auto; }
.sidebar--drawer{
  position: fixed; z-index:70;
  top:0; left:0;
  height:100dvh;
  width: min(92vw, 380px);
  transform: translateX(-105%);
  transition: transform .2s ease;
  border-radius: 0 16px 16px 0;
  padding-top: calc(var(--header-h) + 10px);
}
.sidebar--drawer[data-open="true"]{ 
	transform: translateX(0); 
	display: inherit;
	}

.sidebar--drawer[data-open="true"] .sidebar{ 
	display: inherit;
}



@media (max-width: 980px){
  .layout{ grid-template-columns: 1fr; }
  .sidebar{ display:none; }
  .search{ display:none; }
  .brand{ min-width: unset; }
  .grid--3{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .footer__grid{ grid-template-columns: 1fr; }
}
@media (max-width: 640px){
  :root{ --header-h: 72px; }
  .grid--2, .grid--3{ grid-template-columns: 1fr; }
  .btn{ padding: 10px 12px; }
}


/* === Tweak: slightly greyer header + sidebar (per feedback) === */
.header{
  background: rgba(248,250,252,.92);
  border-bottom: 1px solid #d8e0ea;
}
.sidebar{
  background: #eef2f6;
  border-color: #d8e0ea;
}
.menu a:hover{
  background: rgba(255,255,255,.85);
}
.menu__item--active > a{
  border-color: rgba(2,6,23,.08);
}
.footer{
  background: #eef2f6;
  border-top: 1px solid #d8e0ea;
}


.covers__rail_grid {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	gap: 20px;
}



.line {
	margin-bottom: 50px;
	border-bottom: 1px solid #ccc;
	padding-bottom: 15px;
}
.line p {
	margin: 0px;
	line-height: 18px;
	font-size: .8em;
}

.line p.article_title {
	font-size: 1.2em;
	margin: 5px 0 10px 0;
	line-height: 22px;
}

.line p.article_text {
	font-size: 1em;
	margin: 5px 0;
	line-height: 23px;
}

.line p.article_udc {
	margin: 15px 0 0px 0;
}


@media (max-width: 800px) {
	.covers__rail_grid {
		grid-template-columns: 1fr 1fr 1fr;
	}
}

@media (max-width: 600px) {
	.covers__rail_grid {
		grid-template-columns: 1fr 1fr;
		gap: 4px;
	}
	
	.brand__title {
	  font-size: 15px;
	  line-height: 17px;
	}
	
}