/* ============================================================
   HYDRA STUDIO CODE — blog.css
   Listado estilo "resultados de búsqueda" + vista de artículo
   ============================================================ */

:root{
  --result-blue: #1758d1;
  --result-blue-visited: #3730a3;
}

/* ---------- search-style toolbar ---------- */
.blog-toolbar{
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  margin-bottom:8px;
}
.blog-search{
  flex:1; min-width:240px; position:relative;
}
.blog-search svg{
  position:absolute; left:16px; top:50%; transform:translateY(-50%);
  width:18px; height:18px; color:var(--ink-soft); pointer-events:none;
}
.blog-search input{
  width:100%; padding:14px 16px 14px 46px; border-radius:999px;
  border:1.5px solid var(--line); background:var(--mist);
  font-family:var(--font-body); font-size:.95rem; color:var(--ink);
  transition:border-color .25s var(--ease), background .25s var(--ease), box-shadow .25s var(--ease);
}
.blog-search input:focus{ outline:none; border-color:var(--teal); background:#fff; box-shadow:0 0 0 4px rgba(32,186,175,.12); }
.blog-count{
  font-family:var(--font-mono); font-size:.78rem; color:var(--ink-soft); white-space:nowrap;
}
.blog-count strong{ color:var(--green); }

/* ---------- results list (google-style) ---------- */
.results-list{ display:flex; flex-direction:column; gap:34px; margin-top:36px; }

.result-item{ max-width:680px; cursor:pointer; }
.result-breadcrumb{
  display:flex; align-items:center; gap:8px;
  font-family:var(--font-body); font-size:.82rem; color:var(--green);
  margin-bottom:4px;
}
.result-breadcrumb .dot-sep{ color:var(--ink-soft); opacity:.5; }
.result-breadcrumb .result-date{ color:var(--ink-soft); }

.result-title{
  font-family:var(--font-body); font-size:1.28rem; font-weight:400;
  color:var(--result-blue); margin:0 0 6px; line-height:1.3;
  text-decoration:none; display:inline-block;
}
.result-item:hover .result-title{ text-decoration:underline; }
.result-item:visited .result-title,
.result-item.is-visited .result-title{ color:var(--result-blue-visited); }

.result-desc{
  font-size:.95rem; color:#3c4a52; margin:0 0 12px; line-height:1.6;
  max-width:620px;
}
.result-desc mark{ background:rgba(1,195,157,.18); color:inherit; border-radius:2px; }

.result-author{
  display:flex; align-items:center; gap:10px;
}
.result-author img{
  width:26px; height:26px; border-radius:50%; object-fit:cover;
  border:1.5px solid var(--line); background:var(--mist);
}
.result-author .avatar-fallback{
  width:26px; height:26px; border-radius:50%;
  background:var(--grad); color:#fff; font-family:var(--font-mono); font-size:.68rem;
  display:flex; align-items:center; justify-content:center; font-weight:600;
}
.result-author span{ font-size:.82rem; color:var(--ink-soft); }
.result-author strong{ color:var(--ink); font-weight:600; }

/* ---------- states: loading / empty / error ---------- */
.blog-state{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  padding:60px 20px; color:var(--ink-soft);
}
.blog-state svg{ width:40px; height:40px; color:var(--teal); margin-bottom:16px; }
.blog-state h3{ margin-bottom:6px; }
.skeleton-list{ display:flex; flex-direction:column; gap:34px; margin-top:36px; }
.skeleton-item{ max-width:680px; }
.skeleton-line{
  height:12px; border-radius:6px; background:linear-gradient(90deg, var(--mist) 25%, var(--mist-2) 37%, var(--mist) 63%);
  background-size:400% 100%; animation:skeleton-loading 1.6s ease-in-out infinite; margin-bottom:10px;
}
.skeleton-line.w-30{ width:30%; height:10px; }
.skeleton-line.w-70{ width:70%; height:18px; }
.skeleton-line.w-100{ width:100%; }
.skeleton-line.w-90{ width:90%; }
@keyframes skeleton-loading{ 0%{ background-position:100% 50%; } 100%{ background-position:0 50%; } }

/* ---------- article detail view ---------- */
.blog-detail{ display:none; }
.blog-detail.is-visible{ display:block; }
.blog-list-wrap.is-hidden{ display:none; }

.back-link{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-mono); font-size:.85rem; color:var(--teal);
  margin-bottom:28px; transition:gap .2s var(--ease);
}
.back-link:hover{ gap:12px; }
.back-link svg{ width:16px; height:16px; }

.article-cover{
  width:100%; border-radius:var(--radius); overflow:hidden; margin-bottom:32px;
  aspect-ratio:21/9; background:linear-gradient(135deg,var(--mist-2),var(--mist));
}
.article-cover img{ width:100%; height:100%; object-fit:cover; }

.article-head{ max-width:760px; margin-bottom:32px; }
.article-head .eyebrow{ color:var(--teal); background:rgba(32,186,175,.08); border-color:rgba(32,186,175,.25); }
.article-head h1{ font-size:clamp(1.8rem,3.4vw,2.6rem); }

.article-meta{
  display:flex; align-items:center; gap:14px; padding-top:16px; margin-top:16px;
  border-top:1px solid var(--line);
}
.article-meta img{
  width:48px; height:48px; border-radius:50%; object-fit:cover; border:2px solid #fff; box-shadow:var(--shadow-sm);
}
.article-meta .avatar-fallback{
  width:48px; height:48px; border-radius:50%; background:var(--grad); color:#fff;
  display:flex; align-items:center; justify-content:center; font-family:var(--font-mono); font-weight:600;
}
.article-meta .meta-text strong{ display:block; color:var(--dark); font-size:.95rem; }
.article-meta .meta-text span{ font-family:var(--font-mono); font-size:.78rem; color:var(--ink-soft); }

.article-body{
  max-width:720px; font-size:1.05rem; line-height:1.85; color:#33424a;
}
.article-body h2{ font-size:1.5rem; margin-top:1.6em; }
.article-body h3{ font-size:1.2rem; margin-top:1.4em; }
.article-body p{ margin-bottom:1.2em; color:#33424a; }
.article-body a{ color:var(--teal); text-decoration:underline; text-underline-offset:2px; }
.article-body ul, .article-body ol{ margin:0 0 1.2em 1.4em; color:#33424a; }
.article-body li{ margin-bottom:.5em; }
.article-body blockquote{
  border-left:3px solid var(--green); margin:1.6em 0; padding:4px 0 4px 20px;
  font-style:italic; color:var(--ink-soft);
}
.article-body img{ width:100%; border-radius:var(--radius-sm); margin:1.6em 0; }
.article-body pre{
  background:var(--dark); color:#e6f4f2; padding:18px 20px; border-radius:var(--radius-sm);
  overflow-x:auto; font-family:var(--font-mono); font-size:.85rem; margin:1.6em 0;
}
.article-body code{
  background:var(--mist); color:var(--dark); padding:2px 6px; border-radius:4px;
  font-family:var(--font-mono); font-size:.88em;
}
.article-body hr{ border:none; border-top:1px solid var(--line); margin:2.4em 0; }

.article-share{
  display:flex; align-items:center; gap:12px; margin-top:48px; padding-top:28px; border-top:1px solid var(--line);
}
.article-share span{ font-family:var(--font-mono); font-size:.8rem; color:var(--ink-soft); }
.article-share a{
  width:36px; height:36px; border-radius:10px; background:var(--mist); color:var(--ink-soft);
  display:flex; align-items:center; justify-content:center; transition:all .2s var(--ease);
}
.article-share a:hover{ background:var(--grad); color:#fff; transform:translateY(-2px); }
.article-share svg{ width:16px; height:16px; }

@media (max-width:640px){
  .blog-toolbar{ flex-direction:column; align-items:stretch; }
  .article-meta{ flex-wrap:wrap; }
}