/* =============================================
   CliniGuía — screen.css v1.2
   Paleta: negro / lima / blanco
   ============================================= */

:root {
  --bg:        #000000;
  --bg-card:   #111111;
  --bg-hover:  #181818;
  --border:    #252525;
  --border-hi: #2e2e2e;
  --sep:       #1c1c1e;
  --t1:        #f5f5f5;
  --t2:        #8e8e93;
  --t3:        #6c6c70;
  --t4:        #3a3a3c;
  --lime:      #addc00;
  --lime-bg:   rgba(173,220,0,.09);
  --r-sm:      8px;
  --r-md:      12px;
  --r-pill:    20px;
  --max-w:     660px;
  --nav-h:     52px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--t1);
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
.cg-viewport { display: flex; flex-direction: column; min-height: 100vh; }
.cg-main { flex: 1; }

/* =============================================
   NAV
   ============================================= */
.cg-head {
  background: rgba(0,0,0,.96);
  border-bottom: 0.5px solid var(--sep);
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.cg-head-inner {
  max-width: calc(var(--max-w) + 80px);
  margin: 0 auto;
  padding: 0 24px;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  gap: 24px;
}

.cg-logo {
  color: var(--t1);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.02em;
  white-space: nowrap;
  flex-shrink: 0;
}
.cg-logo img { height: 26px; width: auto; filter: brightness(0) invert(1); }

.cg-nav { flex: 1; }

.nav { display: flex; list-style: none; gap: 20px; padding: 0; margin: 0; }
.nav a { color: var(--t4); font-size: 13px; transition: color .15s; }
.nav a:hover { color: var(--t2); }

.cg-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

.cg-search-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: none;
  border: none;
  color: var(--t4);
  cursor: pointer;
  border-radius: 6px;
  transition: color .15s, background .15s;
  padding: 0;
}
.cg-search-btn:hover { color: var(--t2); background: var(--bg-card); }

.cg-btn {
  display: inline-block;
  background: var(--lime);
  color: #000;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .01em;
  padding: 7px 18px;
  border-radius: var(--r-pill);
  border: none;
  cursor: pointer;
  transition: opacity .15s;
  white-space: nowrap;
  font-family: inherit;
}
.cg-btn:hover { opacity: .85; color: #000; }

/* =============================================
   FEED — CATEGORIZADO POR SECCIONES
   ============================================= */
.cg-feed-wrap {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 32px 24px 64px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.cg-section { display: flex; flex-direction: column; gap: 10px; }

.cg-section-header { margin-bottom: 2px; }

/* =============================================
   TAGS / ETIQUETAS — estilo único para todos
   ============================================= */
.cg-tag {
  display: inline-block;
  background: var(--lime-bg);
  color: var(--lime);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: var(--r-pill);
  white-space: nowrap;
}

a.cg-tag:hover { opacity: .8; }

/* =============================================
   CARDS — estilo fila con flecha
   ============================================= */
.cg-feed { display: flex; flex-direction: column; gap: 10px; }

.cg-card {
  background: var(--bg-card);
  border: 0.5px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: border-color .18s, background .18s;
}
.cg-card:hover { border-color: var(--lime); background: var(--bg-hover); }



.cg-card-link { display: block; color: inherit; }

.cg-card-body {
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.cg-title {
  font-size: 15px;
  font-weight: 500;
  color: var(--t1);
  line-height: 1.35;
  letter-spacing: -0.02em;
}

/* =============================================
   ARTÍCULO INDIVIDUAL
   ============================================= */
.cg-article-wrap,
.cg-article {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 40px 24px 64px;
}

.cg-article-header {
  margin-bottom: 32px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cg-article-title {
  font-size: clamp(1.6rem,4vw,2.2rem);
  font-weight: 700;
  color: var(--t1);
  letter-spacing: -0.04em;
  line-height: 1.15;
}

.cg-article-excerpt { font-size: 1rem; color: var(--t3); line-height: 1.6; }

.cg-article-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--t4);
  padding-top: 14px;
  border-top: 0.5px solid var(--sep);
}

.cg-article-image { margin-bottom: 32px; border-radius: var(--r-md); overflow: hidden; }
.cg-article-image img { width: 100%; height: auto; }

/* =============================================
   CONTENIDO DEL ARTÍCULO
   ============================================= */
.cg-content { color: var(--t2); font-size: 16px; line-height: 1.75; }
.cg-content > * + * { margin-top: 1.25em; }

.cg-content h1,.cg-content h2,.cg-content h3,
.cg-content h4,.cg-content h5,.cg-content h6 {
  color: var(--t1);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.2;
  margin-top: 2em;
  margin-bottom: .5em;
}

.cg-content h1 { font-size: 1.7rem; }
.cg-content h2 { font-size: 1.15rem; border-left: 2px solid var(--lime); padding-left: 14px; }
.cg-content h3 { font-size: 1rem; color: var(--t2); font-weight: 500; }
.cg-content h4 { font-size: .9rem; text-transform: uppercase; letter-spacing: .06em; color: var(--t3); }

.cg-content p { color: var(--t2); }
.cg-content a { color: var(--lime); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--lime-bg); }
.cg-content a:hover { text-decoration-color: var(--lime); }
.cg-content strong,.cg-content b { color: var(--t1); font-weight: 600; }

.cg-content ul,.cg-content ol { padding-left: 1.4em; color: var(--t2); }
.cg-content li { margin: .4em 0; }
.cg-content li::marker { color: var(--lime); }

.cg-content blockquote {
  background: var(--lime-bg);
  border-left: 2px solid var(--lime);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  padding: 14px 18px;
  color: var(--t1);
  font-style: normal;
  margin: 1.5em 0;
}
.cg-content blockquote p { color: var(--t1); margin: 0; }

.cg-content hr { border: none; border-top: 0.5px solid var(--sep); margin: 2em 0; }
.cg-content img { border-radius: var(--r-md); width: 100%; }
.cg-content figure { margin: 1.5em 0; }
.cg-content figcaption { color: var(--t4); font-size: 12px; text-align: center; margin-top: 8px; }

.cg-content code {
  background: #1a1a1a;
  color: var(--lime);
  border: 0.5px solid var(--border-hi);
  border-radius: 5px;
  padding: 1px 6px;
  font-size: .875em;
}

.cg-content pre {
  background: #0d0d0d;
  border: 0.5px solid var(--border-hi);
  border-radius: var(--r-md);
  padding: 18px;
  overflow-x: auto;
  margin: 1.5em 0;
}
.cg-content pre code { background: none; border: none; padding: 0; font-size: 14px; color: var(--t1); }

/* Tablas */
.cg-content table { border-collapse: collapse; width: 100%; font-size: 14px; border: 0.5px solid var(--border-hi); margin: 1.5em 0; }
.cg-content thead { background: #1a1a1a; }
.cg-content th { color: var(--lime); font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; padding: 10px 16px; text-align: left; border-bottom: 0.5px solid var(--border-hi); }
.cg-content td { padding: 10px 16px; border-bottom: 0.5px solid var(--sep); color: var(--t2); vertical-align: top; }
.cg-content tr:last-child td { border-bottom: none; }
.cg-content tr:hover td { background: #141414; }

/* Koenig cards */
.kg-width-wide { width: 85vw; max-width: 1000px; margin-left: auto; margin-right: auto; }
.kg-width-full { width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; }
.kg-image-card { margin: 1.5em 0; }
.kg-image-card img { border-radius: var(--r-md); width: 100%; }
.kg-gallery-card { margin: 1.5em 0; }
.kg-gallery-container { display: flex; flex-wrap: wrap; gap: 8px; }
.kg-gallery-image img { border-radius: var(--r-sm); width: 100%; height: 100%; object-fit: cover; }
.kg-embed-card { margin: 1.5em 0; }
.kg-bookmark-card { margin: 1.5em 0; }
.kg-bookmark-container { display: flex; border: 0.5px solid var(--border-hi); border-radius: var(--r-md); overflow: hidden; background: var(--bg-card); color: inherit; text-decoration: none; }
.kg-bookmark-content { padding: 16px; flex: 1; }
.kg-bookmark-title { color: var(--t1); font-size: 14px; font-weight: 500; margin-bottom: 4px; }
.kg-bookmark-description { color: var(--t3); font-size: 12px; }
.kg-bookmark-thumbnail { width: 140px; flex-shrink: 0; }
.kg-bookmark-thumbnail img { width: 100%; height: 100%; object-fit: cover; }
.kg-callout-card { margin: 1.5em 0; background: var(--bg-card); border: 0.5px solid var(--border); border-radius: var(--r-md); padding: 14px 18px; display: flex; gap: 12px; }
.kg-callout-text { color: var(--t1); font-size: 15px; line-height: 1.55; }
.kg-button-card { margin: 1.5em 0; text-align: center; }
.kg-btn { display: inline-block; background: var(--lime); color: #000; font-weight: 600; padding: 10px 24px; border-radius: var(--r-pill); }

/* Muro de acceso */
.cg-access-wall {
  background: #111;
  border: 0.5px solid var(--border-hi);
  border-radius: var(--r-md);
  padding: 28px 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin: 2em 0;
}
.cg-access-title { color: var(--t1); font-size: 16px; font-weight: 500; }
.cg-access-desc { color: var(--t3); font-size: 13px; }

/* Pie artículo */
.cg-article-footer { margin-top: 40px; padding-top: 20px; border-top: 0.5px solid var(--sep); }
.cg-back { display: inline-flex; align-items: center; gap: 6px; color: var(--t4); font-size: 13px; transition: color .15s; }
.cg-back:hover { color: var(--t2); }

/* Footer */
.cg-foot { background: var(--bg); border-top: 0.5px solid var(--sep); padding: 20px 24px; }
.cg-foot-inner { max-width: calc(var(--max-w) + 80px); margin: 0 auto; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.cg-foot p,.cg-foot a,.cg-foot span { color: var(--t4); font-size: 12px; }
.cg-foot .nav { gap: 16px; }
.cg-foot .nav a { color: var(--t4); font-size: 12px; }
.gh-powered { display: none !important; }

/* Error */
.cg-error { max-width: var(--max-w); margin: 80px auto; padding: 0 24px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.cg-error-code { font-size: 4rem; font-weight: 700; color: var(--border-hi); letter-spacing: -0.05em; line-height: 1; }
.cg-error-title { font-size: 1.4rem; font-weight: 600; color: var(--t1); }
.cg-error-msg { color: var(--t3); font-size: 14px; }

/* Scrollbar */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border-hi); border-radius: 3px; }

/* Responsive */
@media (max-width: 680px) {
  .cg-head { height: auto; }
  .cg-head-inner {
    padding: 10px 16px;
    gap: 8px;
    flex-wrap: wrap;
    height: auto;
  }
  .cg-logo { flex: 1; font-size: 13px; }
  .cg-nav {
    display: flex;
    order: 3;
    width: 100%;
    border-top: 0.5px solid var(--sep);
    padding-top: 8px;
    padding-bottom: 4px;
  }
  .cg-nav .nav { gap: 16px; }
  .cg-nav .nav a { font-size: 12px; color: var(--t3); }
  .cg-actions { flex-shrink: 0; }
  .cg-feed-wrap { padding: 20px 16px 48px; }
  .cg-article-wrap,
.cg-article { padding: 28px 16px 48px; }
  .cg-article-title { font-size: 1.5rem; }
  .cg-content { font-size: 15px; }
  .cg-foot-inner { flex-direction: column; text-align: center; }
  .cg-foot .nav { justify-content: center; }
  .kg-width-wide { width: 100%; }
  .kg-width-full { margin-left: -16px; margin-right: -16px; width: calc(100% + 32px); left: 0; right: 0; }
}

/* ---- Tabs de filtro ---- */
.cg-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 16px;
}

.cg-tab {
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 20px;
  border: 0.5px solid var(--border);
  background: none;
  color: var(--t3);
  cursor: pointer;
  transition: all .15s;
}

.cg-tab:hover { border-color: var(--lime); color: var(--lime); }

.cg-tab--active,
.cg-tab--tag-active {
  color: #000 !important;
  border-color: transparent !important;
  background: var(--lime) !important;
}

/* Cards con descripción */
.cg-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.cg-date { color: var(--t4); font-size: 11px; white-space: nowrap; }

.cg-excerpt {
  color: var(--t3);
  font-size: 13px;
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.cg-meta span { color: var(--t4); font-size: 11px; }