/* ==========================================================================
   AUTONEXO — docs.css
   Estilos para documentacion.html y ayuda.html. Reutiliza variables, temas,
   botones, .app-topbar y .faq-item ya definidos en style.css / app.css.
   ========================================================================== */

.docs-main { padding-block: 48px 96px; }

/* ---------- Paginador (blog.html, estado.html) ---------- */
.pager { display: flex; align-items: center; justify-content: center; gap: 18px; margin: 8px 0 48px; }
.pager__btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--surface); font-size: 0.86rem; font-weight: 600; cursor: pointer; transition: border-color 0.2s var(--ease); }
.pager__btn:hover:not(:disabled) { border-color: var(--orange); }
.pager__btn:disabled { opacity: 0.4; cursor: not-allowed; }
.pager__status { font-family: var(--font-mono); font-size: 0.78rem; color: var(--muted); white-space: nowrap; }

/* ---------- Encabezado de página ---------- */
.docs-hero { max-width: 640px; margin-bottom: 48px; }
.docs-hero h1 { font-size: clamp(1.8rem, 3.2vw, 2.4rem); margin-bottom: 12px; }
.docs-hero p { font-size: 1.02rem; }

/* ---------- Documentación: layout de dos columnas ---------- */
.docs-shell { display: grid; grid-template-columns: 240px 1fr; gap: 56px; align-items: start; }

.docs-sidebar {
  position: sticky; top: 24px;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  padding-right: 8px;
}
.docs-sidebar__group { margin-bottom: 22px; }
.docs-sidebar__group h4 {
  font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 10px;
}
.docs-sidebar__group ul { display: flex; flex-direction: column; gap: 2px; }
.docs-sidebar__group a {
  display: block; font-size: 0.86rem; color: var(--text); padding: 6px 10px;
  border-radius: var(--radius-sm); border-left: 2px solid transparent;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.docs-sidebar__group a:hover { color: var(--orange); }
.docs-sidebar__group a.docs-sidebar__link--active {
  color: var(--orange); border-left-color: var(--orange); background: var(--surface);
  font-weight: 700;
}

.docs-content { min-width: 0; }

.docs-section { padding-bottom: 44px; margin-bottom: 44px; border-bottom: 1px solid var(--border); scroll-margin-top: 24px; }
.docs-section:last-child { border-bottom: none; margin-bottom: 0; }
.docs-section h2 { font-size: 1.4rem; margin-bottom: 14px; }
.docs-section h3 { font-size: 1rem; margin: 20px 0 8px; }
.docs-section p { margin-bottom: 12px; font-size: 0.96rem; line-height: 1.7; }
.docs-section p:last-child { margin-bottom: 0; }
.docs-section ul, .docs-section ol { color: var(--muted); font-size: 0.96rem; line-height: 1.7; padding-left: 20px; margin-bottom: 12px; }
.docs-section li { margin-bottom: 4px; }
.docs-section strong { color: var(--text); }
.docs-section a.docs-link { color: var(--orange); font-weight: 600; }

.docs-note {
  display: flex; gap: 12px; padding: 14px 16px; margin: 16px 0;
  background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--orange);
  border-radius: var(--radius-sm); font-size: 0.88rem; color: var(--text);
}
.docs-note svg { flex-shrink: 0; color: var(--orange); margin-top: 2px; }
.docs-note p { margin: 0; font-size: inherit; color: var(--text); }

.docs-badge-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.docs-badge {
  font-family: var(--font-mono); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em;
  padding: 4px 10px; border-radius: 20px; border: 1px solid var(--border); color: var(--muted);
}

/* ---------- Tarjetas de acceso rápido (arriba de documentacion.html) ---------- */
.docs-quicklinks { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 56px; }
.docs-quicklink {
  display: block; padding: 20px; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-md); transition: border-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.docs-quicklink:hover { border-color: var(--orange); transform: translateY(-2px); }
.docs-quicklink strong { display: block; font-family: var(--font-display); font-size: 0.95rem; margin-bottom: 4px; }
.docs-quicklink span { font-size: 0.82rem; color: var(--muted); }

/* ---------- Centro de ayuda ---------- */
.help-search { max-width: 560px; margin: 28px 0 40px; position: relative; }
.help-search input {
  width: 100%; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: 15px 18px 15px 46px; font-size: 0.98rem; color: var(--text);
  transition: border-color 0.2s var(--ease);
}
.help-search input:focus { border-color: var(--orange); }
.help-search svg { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }

.help-categories { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 48px; }
.help-category-chip {
  font-size: 0.84rem; font-weight: 600; padding: 8px 16px; border-radius: 20px;
  border: 1px solid var(--border); color: var(--muted);
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.help-category-chip:hover { border-color: var(--orange); color: var(--orange); }

.help-category { margin-bottom: 48px; scroll-margin-top: 24px; }
.help-category__header { display: flex; align-items: baseline; gap: 10px; margin-bottom: 16px; }
.help-category__header h2 { font-size: 1.2rem; }
.help-category__header span { font-family: var(--font-mono); font-size: 0.76rem; color: var(--muted); }

.help-empty { display: none; text-align: center; padding: 60px 20px; color: var(--muted); }
.help-empty--visible { display: block; }
.help-empty strong { display: block; color: var(--text); margin-bottom: 8px; font-family: var(--font-display); font-size: 1.05rem; }

.help-item--hidden { display: none !important; }
.help-category--hidden { display: none !important; }

/* ---------- Tarjeta de contacto (compartida) ---------- */
.docs-contact-card {
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  margin-top: 56px; padding: 28px 32px; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.docs-contact-card h3 { font-size: 1.05rem; margin-bottom: 4px; }
.docs-contact-card p { font-size: 0.9rem; margin: 0; }
.docs-contact-card__actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* ---------- Estado del sistema ---------- */
.status-banner { display: flex; align-items: center; gap: 14px; padding: 22px 26px; border-radius: var(--radius-lg); background: rgba(34,197,94,.08); border: 1px solid rgba(34,197,94,.35); margin: 28px 0 40px; }
.status-banner__dot { width: 12px; height: 12px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 4px rgba(34,197,94,.18); flex-shrink: 0; }
.status-banner strong { display: block; font-family: var(--font-display); font-size: 1.05rem; }
.status-banner span { font-size: 0.84rem; color: var(--muted); }
.status-banner--degraded { background: rgba(234,179,8,.08); border-color: rgba(234,179,8,.35); }
.status-banner--degraded .status-banner__dot { background: #eab308; box-shadow: 0 0 0 4px rgba(234,179,8,.18); }
.status-banner--outage { background: rgba(239,68,68,.08); border-color: rgba(239,68,68,.35); }
.status-banner--outage .status-banner__dot { background: #ef4444; box-shadow: 0 0 0 4px rgba(239,68,68,.18); }

.status-list { display: flex; flex-direction: column; gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; margin-bottom: 40px; }
.status-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 20px; background: var(--bg); }
.status-row__name strong { display: block; font-size: 0.94rem; }
.status-row__name span { font-size: 0.8rem; color: var(--muted); }
.status-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 0.78rem; font-weight: 700; padding: 5px 12px; border-radius: 20px; white-space: nowrap; }
.status-pill--ok { background: rgba(34,197,94,.12); color: #16a34a; }
.status-pill--ok::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #16a34a; }
.status-pill--warn { background: rgba(234,179,8,.12); color: #ca8a04; }
.status-pill--warn::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #ca8a04; }
.status-pill--down { background: rgba(239,68,68,.12); color: #dc2626; }
.status-pill--down::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #dc2626; }

.status-incident { padding: 16px 20px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); margin-bottom: 12px; }
.status-incident__header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.status-incident__header strong { font-size: 0.94rem; }
.status-incident p { font-size: 0.86rem; color: var(--muted); margin: 6px 0 0; }
.status-incident__dates { font-size: 0.76rem; color: var(--muted); margin-top: 8px; font-family: var(--font-mono); }

/* ---------- Blog: portada / arte de cover (SVG, no fotos de stock — el
   sitio no usa fotografía genérica en ningún otro lado, así que un ícono
   grande sobre degradado de marca es más consistente que rellenar con
   imágenes de banco sin relación real con el contenido). ---------- */
.blog-cover {
  position: relative; display: flex; align-items: center; justify-content: center;
  aspect-ratio: 16 / 9; border-radius: var(--radius-lg); overflow: hidden;
  background: linear-gradient(135deg, #1a2130 0%, #0c0f16 100%);
}
.blog-cover::before {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(circle at 28% 22%, rgba(242,138,35,.38) 0%, transparent 58%);
}
.blog-cover svg { position: relative; width: 30%; max-width: 96px; height: auto; color: var(--orange); opacity: 0.92; }
.blog-cover--sm { aspect-ratio: 21 / 9; }
/* Posts creados desde /admin-ui/blog.html pueden traer una imagen de
   portada real (cover_image_url) en vez del ícono-sobre-degradado por
   defecto — si no la traen, cae al mismo tratamiento que el resto del blog. */
.blog-cover img { position: relative; width: 100%; height: 100%; object-fit: cover; }

/* ---------- Blog: listado en grilla de tarjetas ---------- */
.blog-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-bottom: 56px; }
.blog-card { display: block; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; transition: border-color 0.2s var(--ease), transform 0.2s var(--ease); }
.blog-card:hover { border-color: var(--orange); transform: translateY(-3px); }
.blog-card__body { padding: 22px 24px 24px; }
.blog-card__meta { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.blog-card__tag { color: var(--orange); font-weight: 700; }
.blog-card h2 { font-size: 1.08rem; margin-bottom: 8px; line-height: 1.35; }
.blog-card p { font-size: 0.88rem; margin: 0; }
.blog-card__author { display: flex; align-items: center; gap: 8px; margin-top: 18px; }
.blog-card__author img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; }
.blog-card__author span { font-size: 0.8rem; color: var(--muted); }

/* ---------- Blog: artículo individual ---------- */
.blog-article__meta { display: flex; align-items: center; gap: 14px; margin: 24px 0 32px; }
.blog-article__author { display: flex; align-items: center; gap: 10px; }
.blog-article__author img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.blog-article__author strong { display: block; font-size: 0.9rem; }
.blog-article__author span { font-size: 0.78rem; color: var(--muted); }
.blog-article__divider { width: 1px; height: 28px; background: var(--border); }
.blog-article__tag { font-family: var(--font-mono); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--orange); }

.blog-article__body p { margin-bottom: 16px; font-size: 1rem; line-height: 1.8; }
.blog-article__body ul { color: var(--muted); font-size: 0.97rem; line-height: 1.75; padding-left: 20px; margin-bottom: 16px; }
.blog-article__body li { margin-bottom: 6px; }
.blog-article__body strong { color: var(--text); }

.blog-inline-figure { margin: 30px 0; padding: 24px 26px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); }
.blog-inline-figure__caption { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin-top: 14px; }

.blog-related { margin-top: 56px; padding-top: 40px; border-top: 1px solid var(--border); }
.blog-related h3 { font-size: 1rem; margin-bottom: 18px; }
.blog-related__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.blog-related__grid a { display: block; padding: 16px 18px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); font-size: 0.86rem; font-weight: 700; transition: border-color 0.2s var(--ease); }
.blog-related__grid a:hover { border-color: var(--orange); }
.blog-related__grid a span { display: block; font-weight: 400; color: var(--muted); font-size: 0.76rem; margin-top: 6px; }

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  .docs-shell { grid-template-columns: 1fr; gap: 32px; }
  .docs-sidebar { position: static; max-height: none; }
  .docs-sidebar__group { margin-bottom: 0; }
  .docs-sidebar { display: flex; flex-wrap: wrap; gap: 6px; border-bottom: 1px solid var(--border); padding-bottom: 20px; }
  .docs-sidebar__group { display: contents; }
  .docs-sidebar__group h4 { display: none; }
  .docs-sidebar__group ul { display: contents; }
  .docs-sidebar__group a { border-left: none; border: 1px solid var(--border); border-radius: 20px; padding: 6px 14px; }
  .docs-sidebar__group a.docs-sidebar__link--active { border-color: var(--orange); background: transparent; }
  .docs-quicklinks { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .docs-quicklinks { grid-template-columns: 1fr; }
  .docs-contact-card { flex-direction: column; align-items: flex-start; }
  .blog-grid { grid-template-columns: 1fr; }
  .blog-related__grid { grid-template-columns: 1fr; }
}