/* Tokens (alineados con horarium.es) */
:root{
  --background: 220 30% 6%;
  --foreground: 0 0% 98%;
  --card: 220 25% 10%;
  --card-foreground: 0 0% 98%;
  --muted-foreground: 220 10% 65%;
  --primary: 186 100% 45%;
  --accent: 330 85% 55%;
  --border: 220 20% 20%;
  --radius: .75rem;

  --gradient-primary: linear-gradient(135deg, hsl(186 100% 45%) 0%, hsl(200 100% 55%) 100%);
  --gradient-accent: linear-gradient(135deg, hsl(330 85% 55%) 0%, hsl(340 90% 60%) 100%);

  --shadow-card: 0 10px 40px -10px hsl(0 0% 0% / .55);
  --transition-smooth: all .25s cubic-bezier(.4, 0, .2, 1);
}

*{ box-sizing: border-box; }
html, body{ height: 100%; }

body{
  margin: 0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: hsl(var(--background));
  color: hsl(var(--foreground));
}

a{
  color: inherit;
  text-decoration: none;
  transition: var(--transition-smooth);
}

/* HERO (fondo estilo home horarium.es: gradiente + glows laterales) */
.help-hero{
  min-height: 100vh;
  background:
    radial-gradient(900px 500px at 82% 40%, hsl(var(--accent) / .25), transparent 60%),
    radial-gradient(900px 500px at 18% 55%, hsl(var(--primary) / .20), transparent 60%),
    linear-gradient(180deg, hsl(220 30% 10%) 0%, hsl(220 30% 6%) 55%, hsl(220 30% 6%) 100%);
}

/* HEADER */
.help-header{
  position: sticky;
  top: 0;
  z-index: 10;
  backdrop-filter: blur(10px);
  background: hsl(220 30% 10% / .55);
  border-bottom: 1px solid hsl(var(--border) / .8);
}

.help-header-inner{
  max-width: 1200px;
  margin: 0 auto;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.help-brand{
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.help-logo{
  height: 28px;
  width: auto;
  display: block;
}

.help-topnav{
  display: flex;
  align-items: center;
  gap: 18px;
  font-weight: 500;
  color: hsl(var(--foreground) / .85);
}

.help-topnav a{
  padding: 8px 10px;
  border-radius: 999px;
}

.help-topnav a:hover{
  background: hsl(220 20% 15% / .6);
  color: hsl(var(--foreground));
}

.help-cta{
  background: hsl(var(--accent));
  color: hsl(0 0% 100%);
  padding: 10px 14px !important;
  border-radius: 999px;
  box-shadow: 0 10px 30px -14px hsl(var(--accent) / .6);
}

.help-cta:hover{ opacity: .95; }

/* SHELL (sidebar izquierda + contenido derecha) */
.help-shell{
  max-width: 1200px;
  margin: 0 auto;
  padding: 26px 18px 46px;
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 18px;
}

@media (max-width: 980px){
  .help-topnav{ display:none; }
  .help-shell{ grid-template-columns: 1fr; }
}

/* SIDEBAR */
.help-sidebar{
  position: sticky;
  top: 74px;
  align-self: start;
}

.help-sidecard{
  background: hsl(var(--card) / .55);
  border: 1px solid hsl(var(--border) / .8);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 14px;
  backdrop-filter: blur(8px);
}

.help-side-title{
  font-size: .9rem;
  color: hsl(var(--foreground) / .85);
  margin-bottom: 10px;
  letter-spacing: .02em;
}

.help-sidenav{
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.help-sidenav a{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  color: hsl(var(--foreground) / .78);
  border: 1px solid transparent;
}

.help-sidenav a:hover{
  background: hsl(220 20% 15% / .55);
  color: hsl(var(--foreground));
}

.help-sidenav a.is-active{
  background: hsl(var(--primary) / .14);
  border-color: hsl(var(--primary) / .25);
  color: hsl(var(--foreground));
}

/* CONTENT */
.help-content{ min-width: 0; }

.help-card{
  background: hsl(var(--card) / .55);
  border: 1px solid hsl(var(--border) / .8);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 20px;
  backdrop-filter: blur(8px);
}

.help-h1{
  margin: 0 0 10px;
  font-size: 2rem;
  line-height: 1.1;
}

.help-muted{
  margin: 0 0 14px;
  color: hsl(var(--muted-foreground));
}

.help-backlink{
  display: inline-block;
  margin-bottom: 10px;
  color: hsl(var(--foreground) / .7);
}
.help-backlink:hover{ color: hsl(var(--foreground)); }

.help-kpi{
  margin-top: 14px;
  display: grid;
  gap: 12px;
}

.help-kpi-item{
  border: 1px solid hsl(var(--border) / .8);
  border-radius: 12px;
  padding: 14px;
  background: hsl(220 20% 15% / .35);
}

.help-kpi-title{
  font-weight: 600;
  margin-bottom: 4px;
}

.help-kpi-text{
  color: hsl(var(--foreground) / .82);
}

/* FOOTER (similar a horarium.es) */
.help-footer{
  border-top: 1px solid hsl(var(--border) / .8);
  background: hsl(220 30% 10% / .45);
  backdrop-filter: blur(10px);
}

.help-footer-inner{
  max-width: 1200px;
  margin: 0 auto;
  padding: 26px 18px;
  display: grid;
  grid-template-columns: 1.4fr 1fr .6fr;
  gap: 18px;
  align-items: start;
}

@media (max-width: 980px){
  .help-footer-inner{ grid-template-columns: 1fr; }
}

.help-footer-logo{
  height: 22px;
  width: auto;
  display: block;
  margin-bottom: 10px;
}

.help-footer-text{
  margin: 0;
  color: hsl(var(--muted-foreground));
  line-height: 1.5;
  max-width: 520px;
}

.help-footer-links{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.help-footer-links a{
  color: hsl(var(--foreground) / .8);
}

.help-footer-links a:hover{
  color: hsl(var(--foreground));
}

.help-footer-copy{
  color: hsl(var(--muted-foreground));
  font-size: .9rem;
  text-align: right;
}

@media (max-width: 980px){
  .help-footer-copy{ text-align: left; }
}

.help-md{
  line-height: 1.75;
  color: hsl(var(--foreground) / .92);
}

.help-md h2, .help-md h3{
  margin: 18px 0 10px;
}

.help-md p{
  margin: 10px 0;
  color: hsl(var(--foreground) / .88);
}

.help-md ul, .help-md ol{
  margin: 10px 0 10px 18px;
}

.help-md code{
  background: hsl(220 20% 15% / .6);
  border: 1px solid hsl(var(--border) / .8);
  padding: 2px 6px;
  border-radius: 8px;
}

/* Accordion sidebar */
.help-accordion{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.help-acc-item{
  border: 1px solid hsl(var(--border) / .8);
  border-radius: 12px;
  background: hsl(220 20% 15% / .25);
  overflow: hidden;
}

.help-acc-summary{
  list-style: none;
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  color: hsl(var(--foreground) / .88);
}

.help-acc-summary::-webkit-details-marker{ display:none; }

.help-acc-title{
  font-weight: 600;
  font-size: .92rem;
}

.help-acc-chevron{
  opacity: .8;
  transform: rotate(0deg);
  transition: var(--transition-smooth);
}

.help-acc-item[open] .help-acc-chevron{
  transform: rotate(180deg);
}

.help-acc-links{
  padding: 6px 8px 10px;
}

.help-acc-links a{
  border-radius: 10px;
}

/* Sidebar scroll cuando el índice crezca */
.help-sidebar{
  max-height: calc(100vh - 90px);
  overflow: auto;
  padding-right: 6px;
}