/* =========================================================
   GUIDES — kit de componentes para las guías del servidor
   Sigue el tema del sitio: Cinzel, ámbar #f4b978, paneles
   glass marrón oscuro, bordes rgba(167,131,111,.25).
   Todos los componentes usan prefijo g- para no colisionar.
   ========================================================= */

:root{
  --g-accent: #f4b978;
  --g-accent-hi: #ffd28a;
  --g-red: #fc6950;
  --g-green: #7fc46a;
  --g-blue: #7ab3e0;
  --g-violet: #b08bff;
  --g-amber: #ffb340;
  --g-txt: #f4efe7;
  --g-dim: rgba(244,239,231,.72);
  --g-stroke: rgba(167,131,111,.25);
  --g-stroke-hi: rgba(244,185,120,.45);
  --g-panel: rgba(28,15,7,.55);
  --g-panel-2: rgba(0,0,0,.22);
  /* etapas de evolución (mascotas) armonizadas al tema */
  --g-st-joven: #7fc46a;
  --g-st-salvaje: #e6b84f;
  --g-st-valerosa: #e88a5f;
  --g-st-heroica: #b08bff;
  --g-st-despertado: #7ab3e0;
  --g-st-campeon: #fc6950;
}

.guide-wrap{ font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color: var(--g-txt); }
.guide-wrap img{ max-width: 100%; height: auto; }

/* ---------- cabecera de la guía ---------- */
.g-hero{
  position: relative;
  padding: 22px 20px 18px;
  border-radius: 16px;
  border: 1px solid var(--g-stroke);
  background:
    radial-gradient(420px 160px at 85% 0%, rgba(244,185,120,.16), transparent 65%),
    linear-gradient(180deg, rgba(28,15,7,.82), rgba(0,0,0,.35));
  box-shadow: 0 10px 24px rgba(0,0,0,.30);
  margin-bottom: 12px;
  overflow: hidden;
}
.g-hero .g-eyebrow{ margin-bottom: 6px; }
.g-hero h1{
  margin: 0 0 6px;
  font-family: 'Cinzel', serif;
  font-weight: 700;
  font-size: 24px;
  line-height: 1.15;
  color: #ecd6b4;
  letter-spacing: .5px;
}
.g-hero h1 b{ color: var(--g-accent); }
.g-hero p{ margin: 0; color: var(--g-dim); font-size: 14px; line-height: 1.5; max-width: 64ch; }

.g-eyebrow{
  font-family: 'Cinzel', serif;
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--g-accent);
}

/* ---------- métricas rápidas ---------- */
.g-metrics{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: 8px;
  margin: 12px 0;
}
.g-m{
  padding: 12px 8px;
  text-align: center;
  border: 1px solid var(--g-stroke);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(244,185,120,.10), rgba(0,0,0,.18));
}
.g-m .n{
  font-family: 'Cinzel', serif;
  font-weight: 700;
  font-size: 22px;
  color: var(--g-accent);
  text-shadow: 0 0 14px rgba(244,185,120,.35);
  line-height: 1.1;
}
.g-m .l{ font-size: 10.5px; color: var(--g-dim); letter-spacing: .4px; margin-top: 3px; }

/* ---------- pestañas ---------- */
.g-tabs{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 12px;
}
.g-tab{
  font-family: 'Cinzel', serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--g-dim);
  padding: 9px 14px;
  cursor: pointer;
  border: 1px solid var(--g-stroke);
  border-radius: 999px;
  background: rgba(0,0,0,.28);
  transition: all .2s ease;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  user-select: none;
}
.g-tab i{ font-size: 12px; opacity: .8; }
.g-tab:hover{ color: var(--g-accent-hi); border-color: var(--g-stroke-hi); transform: translateY(-1px); }
.g-tab.active{
  color: #1a0a04;
  background: linear-gradient(180deg, rgba(244,185,120,1) 0%, rgba(198,67,13,1) 100%);
  border-color: rgba(255,255,255,.14);
  box-shadow: 0 8px 18px rgba(0,0,0,.30), 0 0 16px rgba(244,185,120,.22);
}
.g-tab.active i{ opacity: 1; }

/* sub-pestañas (nivel 2) */
.g-subtabs{ display: flex; flex-wrap: wrap; gap: 5px; margin: 0 0 12px; }
.g-subtab{
  font-family: 'Cinzel', serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .4px;
  padding: 7px 12px;
  border-radius: 10px;
  cursor: pointer;
  color: var(--g-dim);
  border: 1px solid var(--g-stroke);
  background: rgba(0,0,0,.25);
  transition: all .18s ease;
  user-select: none;
}
.g-subtab:hover{ color: var(--g-txt); }
.g-subtab.active{
  color: var(--g-accent-hi);
  border-color: var(--g-stroke-hi);
  background: rgba(244,185,120,.14);
}

/* paneles */
.g-panel{ display: none; }
.g-panel.active{ display: block; }

/* ---------- secciones ---------- */
.g-section{
  border: 1px solid var(--g-stroke);
  border-radius: 14px;
  background: var(--g-panel-2);
  padding: 14px 16px;
  margin-bottom: 12px;
}
.g-section-title{
  font-family: 'Cinzel', serif;
  font-weight: 700;
  font-size: 16px;
  color: #ecd6b4;
  letter-spacing: .5px;
  margin: 0 0 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--g-stroke);
  display: flex;
  align-items: center;
  gap: 9px;
}
.g-section-title i{ color: var(--g-accent); font-size: 14px; }
.g-section-sub{
  font-family: 'Cinzel', serif;
  font-weight: 700;
  font-size: 13.5px;
  color: var(--g-accent);
  letter-spacing: .4px;
  margin: 14px 0 7px;
}
.g-section p{ font-size: 14px; line-height: 1.55; color: var(--g-dim); margin: 0 0 8px; }
.g-section p b, .g-section li b{ color: var(--g-txt); }
.g-section p:last-child{ margin-bottom: 0; }

/* listas con rombos (como las cards del sitio) */
.g-list{ list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.g-list li{
  position: relative;
  padding-left: 16px;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--g-dim);
}
.g-list li::before{
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 6px;
  height: 6px;
  background: var(--g-accent);
  transform: rotate(45deg);
}

/* ---------- avisos / tips ---------- */
.g-tip{
  display: flex;
  gap: 10px;
  padding: 11px 14px;
  border-radius: 12px;
  font-size: 13.5px;
  line-height: 1.5;
  margin: 8px 0;
  color: var(--g-txt);
  background: linear-gradient(90deg, rgba(244,185,120,.10), transparent);
  border: 1px solid var(--g-stroke);
  border-left: 4px solid var(--g-accent);
}
.g-tip i{ flex: none; margin-top: 2px; color: var(--g-accent); }
.g-tip b{ color: var(--g-accent-hi); }
.g-tip.warn{ border-left-color: var(--g-amber); background: linear-gradient(90deg, rgba(255,179,64,.10), transparent); }
.g-tip.warn i{ color: var(--g-amber); }
.g-tip.ok{ border-left-color: var(--g-green); background: linear-gradient(90deg, rgba(127,196,106,.10), transparent); }
.g-tip.ok i{ color: var(--g-green); }
.g-tip.danger{ border-left-color: var(--g-red); background: linear-gradient(90deg, rgba(252,105,80,.12), transparent); }
.g-tip.danger i{ color: var(--g-red); }

/* ---------- tablas ---------- */
.g-table-wrap{ width: 100%; overflow-x: auto; border-radius: 12px; border: 1px solid var(--g-stroke); margin: 8px 0; }
.g-table{
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
  background: rgba(0,0,0,.18);
}
.g-table th{
  font-family: 'Cinzel', serif;
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--g-txt);
  text-align: left;
  padding: 9px 10px;
  background: rgba(244,185,120,.18);
  border-bottom: 1px solid rgba(167,131,111,.35);
  white-space: nowrap;
}
.g-table td{
  padding: 8px 10px;
  border-bottom: 1px solid rgba(167,131,111,.22);
  color: var(--g-dim);
  vertical-align: middle;
}
.g-table td b{ color: var(--g-txt); }
.g-table tbody tr{ background: rgba(0,0,0,.12); transition: background .2s; }
.g-table tbody tr:nth-child(2n){ background: rgba(0,0,0,.24); }
.g-table tbody tr:hover{ background: rgba(244,185,120,.08); }
.g-table tbody tr:last-child td{ border-bottom: none; }

/* ---------- grids y tarjetas internas ---------- */
.g-cols2{ display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 8px 0; }
.g-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 10px;
  margin: 8px 0;
}
.g-card{
  border: 1px solid var(--g-stroke);
  border-radius: 12px;
  padding: 12px 13px;
  background: rgba(0,0,0,.22);
  transition: border-color .2s, box-shadow .2s;
}
.g-card:hover{ border-color: var(--g-stroke-hi); box-shadow: 0 0 16px rgba(244,185,120,.10); }
.g-card h4{
  font-family: 'Cinzel', serif;
  font-weight: 700;
  font-size: 13.5px;
  color: var(--g-accent);
  letter-spacing: .3px;
  margin: 0 0 6px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.g-card p{ font-size: 13px; line-height: 1.5; color: var(--g-dim); margin: 0 0 6px; }
.g-card p:last-child{ margin-bottom: 0; }
.g-card .src{ font-size: 12.5px; color: var(--g-dim); line-height: 1.45; }
.g-card .src b{ color: var(--g-txt); font-weight: 600; }

/* ---------- items con icono ---------- */
.g-icn{
  width: 46px;
  height: 46px;
  flex: none;
  border: 1px solid var(--g-stroke);
  border-radius: 8px;
  background: rgba(0,0,0,.35);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.g-icn img{ max-width: 42px; max-height: 42px; width: auto; height: auto; filter: drop-shadow(0 1px 3px rgba(0,0,0,.6)); }
.g-icn.sm{ width: 36px; height: 36px; }
.g-icn.sm img{ max-width: 32px; max-height: 32px; }
.g-noimg{
  color: var(--g-dim);
  font-family: 'Cinzel', serif;
  font-size: 8px;
  text-align: center;
  line-height: 1.15;
  padding: 2px;
  letter-spacing: .4px;
}

.g-items{ display: flex; flex-direction: column; gap: 6px; margin: 8px 0; }
.g-item{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border: 1px solid var(--g-stroke);
  border-radius: 10px;
  background: rgba(0,0,0,.20);
  font-size: 13px;
  color: var(--g-txt);
  transition: border-color .2s;
}
.g-item:hover{ border-color: var(--g-stroke-hi); }
.g-item .meta{ min-width: 0; }
.g-item .meta small{ display: block; color: var(--g-dim); font-size: 11.5px; }
.g-qty{
  margin-left: auto;
  flex: none;
  font-family: 'Cinzel', serif;
  font-weight: 700;
  font-size: 12px;
  color: var(--g-accent);
  border: 1px solid var(--g-stroke);
  border-radius: 8px;
  padding: 3px 9px;
  background: rgba(244,185,120,.10);
  white-space: nowrap;
}

/* fila horizontal de iconos fuente (jefes, cofres…) */
.g-srcrow{ display: flex; gap: 6px; margin-top: 7px; flex-wrap: wrap; align-items: center; }
.g-srcrow img{
  height: 44px;
  width: auto;
  border: 1px solid var(--g-stroke);
  border-radius: 8px;
  background: rgba(0,0,0,.35);
}

/* ---------- badges ---------- */
.g-badge{
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: 'Cinzel', serif;
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: .6px;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--g-stroke);
  background: rgba(244,185,120,.10);
  color: var(--g-accent);
  white-space: nowrap;
}
.g-badge.red{ color: var(--g-red); background: rgba(252,105,80,.10); }
.g-badge.green{ color: var(--g-green); background: rgba(127,196,106,.10); }
.g-badge.blue{ color: var(--g-blue); background: rgba(122,179,224,.10); }
.g-badge.violet{ color: var(--g-violet); background: rgba(176,139,255,.10); }
.g-badge.dim{ color: var(--g-dim); background: rgba(0,0,0,.20); }

/* etapas de evolución */
.g-stage{ border-left: 4px solid var(--g-stroke); }
.g-stage.joven{ border-left-color: var(--g-st-joven); }
.g-stage.salvaje{ border-left-color: var(--g-st-salvaje); }
.g-stage.valerosa{ border-left-color: var(--g-st-valerosa); }
.g-stage.heroica{ border-left-color: var(--g-st-heroica); }
.g-stage.despertado{ border-left-color: var(--g-st-despertado); }
.g-stage.campeon{ border-left-color: var(--g-st-campeon); }
.g-stage-name{ font-family: 'Cinzel', serif; font-weight: 700; letter-spacing: .5px; }
.joven .g-stage-name{ color: var(--g-st-joven); }
.salvaje .g-stage-name{ color: var(--g-st-salvaje); }
.valerosa .g-stage-name{ color: var(--g-st-valerosa); }
.heroica .g-stage-name{ color: var(--g-st-heroica); }
.despertado .g-stage-name{ color: var(--g-st-despertado); }
.campeon .g-stage-name{ color: var(--g-st-campeon); }

/* ---------- pasos numerados ---------- */
.g-steps{ list-style: none; margin: 8px 0; padding: 0; counter-reset: gstep; display: flex; flex-direction: column; gap: 8px; }
.g-steps li{
  counter-increment: gstep;
  position: relative;
  padding: 10px 12px 10px 46px;
  border: 1px solid var(--g-stroke);
  border-radius: 12px;
  background: rgba(0,0,0,.20);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--g-dim);
}
.g-steps li b{ color: var(--g-txt); }
.g-steps li::before{
  content: counter(gstep);
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Cinzel', serif;
  font-weight: 700;
  font-size: 13px;
  color: #1a0a04;
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(244,185,120,1), rgba(198,67,13,1));
  box-shadow: 0 4px 10px rgba(0,0,0,.35);
}

/* ---------- figuras / capturas ---------- */
.g-fig{
  margin: 10px 0;
  border: 1px solid var(--g-stroke);
  border-radius: 12px;
  overflow: hidden;
  background: rgba(0,0,0,.30);
}
.g-fig img{ display: block; width: 100%; }
.g-fig figcaption{
  padding: 8px 12px;
  font-size: 12px;
  color: var(--g-dim);
  border-top: 1px solid var(--g-stroke);
  text-align: center;
}
.g-gallery{ display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; margin: 8px 0; }
.g-gallery .g-fig{ margin: 0; }

/* ---------- acordeón ---------- */
details.g-acc{
  border: 1px solid var(--g-stroke);
  border-radius: 12px;
  background: rgba(0,0,0,.20);
  margin-bottom: 8px;
  overflow: hidden;
}
details.g-acc summary{
  cursor: pointer;
  list-style: none;
  padding: 11px 14px;
  font-family: 'Cinzel', serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .4px;
  color: #ecd6b4;
  display: flex;
  align-items: center;
  gap: 9px;
  transition: background .2s;
}
details.g-acc summary::-webkit-details-marker{ display: none; }
details.g-acc summary::after{
  content: "\2039";
  margin-left: auto;
  color: var(--g-accent);
  font-size: 18px;
  transform: rotate(-90deg);
  transition: transform .2s;
}
details.g-acc[open] summary::after{ transform: rotate(90deg); }
details.g-acc summary:hover{ background: rgba(244,185,120,.08); }
details.g-acc .g-acc-body{ padding: 4px 14px 12px; border-top: 1px solid var(--g-stroke); }

/* ---------- índice de guías ---------- */
.g-index{ display: grid; grid-template-columns: 1fr; gap: 10px; }
.g-index-card{
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  border-radius: 14px;
  border: 1px solid var(--g-stroke);
  background:
    linear-gradient(90deg, rgba(244,185,120,.08), transparent 55%),
    rgba(0,0,0,.22);
  transition: all .2s ease;
  color: var(--g-txt);
}
.g-index-card:hover{
  border-color: var(--g-stroke-hi);
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(0,0,0,.30), 0 0 18px rgba(244,185,120,.14);
  color: var(--g-txt);
}
.g-index-card .ico{
  flex: none;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: var(--g-accent);
  border: 1px solid var(--g-stroke);
  border-radius: 12px;
  background: rgba(244,185,120,.10);
  text-shadow: 0 0 14px rgba(244,185,120,.35);
}
.g-index-card .txt{ min-width: 0; }
.g-index-card .txt h3{
  margin: 0 0 3px;
  font-family: 'Cinzel', serif;
  font-weight: 700;
  font-size: 15px;
  color: #ecd6b4;
  letter-spacing: .4px;
}
.g-index-card .txt p{ margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--g-dim); }
.g-index-card .go{
  margin-left: auto;
  flex: none;
  color: var(--g-accent);
  font-size: 16px;
  transition: transform .2s;
}
.g-index-card:hover .go{ transform: translateX(4px); }

/* volver al índice */
.g-back{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--g-stroke);
  background: rgba(0,0,0,.28);
  color: var(--g-dim);
  font-family: 'Cinzel', serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .5px;
  text-transform: uppercase;
  transition: all .2s;
}
.g-back:hover{ color: var(--g-accent-hi); border-color: var(--g-stroke-hi); }

/* ---------- responsive ---------- */
@media (max-width: 992px){
  .g-cols2{ grid-template-columns: 1fr; }
  .g-hero h1{ font-size: 20px; }
  .g-metrics{ grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); }
}