/* ===== THEME ===== */
:root{
  --brand:#f97316;         /* primario */
  --brand-600:#ea580c;
  --ink:#1f2937;           /* texto */
  --muted:#6b7280;         /* texto secundario */
  --bg:#ffffff;
  --panel:#f8fafc;
  --line:#e5e7eb;
  --shadow:0 6px 20px rgba(17,24,39,.08);

  --info-bg:#e6f4ff; --info-ink:#0b4a6f;
  --warn-bg:#fff3e6; --warn-ink:#7a2e0b;
  --danger-bg:#fee2e2; --danger-ink:#7f1d1d;
}

/* ===== LAYOUT GLOBAL (usa tus IDs existentes) ===== */
#index{ color:var(--ink); }
#topicsmain_in{ display:grid; grid-template-columns: 1fr; gap:16px; }
#topicsmain, #topicsmenu{ align-self:start; }
#topicsmain{ width:100%; }
#topicsmenu{ width:100%; }
#topicsmain_in .section h3{
  font-size: 20px;
  font-weight: 600;
}
/* Desktop: sidebar izquierda y contenido derecha */
@media (min-width: 980px){
  #index{ display:grid; grid-template-columns: 280px 1fr; gap:24px; }
  #topicsmenu{ position:sticky; top:24px; }
}

/* ===== TITULARES / TEXTO ===== */
h1.title{
  font-size: clamp(22px,2.2vw,32px);
  margin:0 0 10px;
  padding-bottom:12px;
  border-bottom:2px solid var(--line);
  color:var(--ink);
}
#topicsmain h2{
  font-size: clamp(18px,1.6vw,24px);
  margin: 22px 0 8px;
  color:var(--brand-600);
}
#topicsmain p, #topicsmain li{ line-height:1.85; }

/* utilidades que ya usás */
.b{ font-weight:700; }
.red{ color:#b91c1c; }
.tac{ text-align:center; }
.pa10{ padding:10px; }
.mv20{ margin:20px 0; }
.mb10{ margin-bottom:10px; }
.w100{ width:100%; }
.w100per{ width:100%; }
.mw80per{ max-width:80%; }
.mha{ margin-left:auto; margin-right:auto; display:block; }
.font24{ font-size:24px; }
.font22{ font-size:22px; }

/* ===== SECCIONES (usa .section existente) ===== */
.section{
  background:#fff;
  border:1px solid var(--line);
  border-radius:14px;
  padding:18px 18px 10px;
  margin:14px 0 20px;
  box-shadow: var(--shadow);
}
.section > h2{ display:flex; align-items:center; gap:8px; }

/* ===== LISTAS ===== */
#topicsmain ul.comment,
#topicsmain ul.list,
#topicsmain .caution ul{
  list-style:none; padding-left:0; margin:8px 0 12px;
}
#topicsmain ul.comment li,
#topicsmain .caution ul li{
  position:relative; padding-left:20px; margin:6px 0;
}
#topicsmain ul.comment li::before,
#topicsmain .caution ul li::before{
  content:""; position:absolute; left:0; top:.8em;
  width:8px; height:8px; border-radius:999px; background:var(--brand);
}

/* ===== CALLOUTS (usa .caution existente + variantes por contexto) ===== */
.caution{
  background: var(--warn-bg);
  border:1px solid #ffd7b3;
  color:var(--warn-ink);
  border-radius:12px;
  padding:14px 16px;
  margin:14px 0;
}
.caution .comment{ margin:0 0 6px; font-weight:700; }

/* (opcional) bloque informativo suave usando clases que ya tienes */
.commentll{ 
  background: var(--info-bg);
  border:1px solid #c9e6ff;
  color: var(--info-ink);
  border-radius:12px;
  padding:12px 14px;
  margin:10px 0;
}
.pc_w90per{ width:90%; margin-inline:auto; }

/* ===== FLOW DE PASOS (usa .flowboard existente) ===== */
.flowboard{
  background:#fff;
  border:1px dashed color-mix(in srgb, var(--brand) 25%, var(--line));
  border-radius:14px;
  padding:14px;
  margin:16px 0;
  box-shadow: var(--shadow);
}
.flowboard .commentl{ color:var(--ink); }
.flowboard img{
  width:100%; height:auto;
  border-radius:10px;
  border:1px solid var(--line);
}

/* ===== SIDEBAR NAV (usa tus clases dentro de #topicsmenu) ===== */
#topicsmenu .infomenublock{
  background: var(--panel);
  border:1px solid var(--line);
  border-radius:12px;
  padding:14px;
  box-shadow: var(--shadow);
}
#topicsmenu h2{
  font-size:18px; margin:0 0 10px;
  color:var(--ink);
}
#topicsmenu ul{ list-style:none; padding:0; margin:0; }
#topicsmenu li + li{ margin-top:6px; }
#topicsmenu a{
  display:block; text-decoration:none;
  color:var(--ink);
  padding:8px 10px;
  border-radius:10px;
  border:1px solid transparent;
}
#topicsmenu a.linkhere{ font-weight:600; }
#topicsmenu a:hover{
  background:#fff; border-color:var(--line);
}
#topicsmenu a.linkother{ color:var(--muted); }

/* estado activo por ancla (añade la clase link-active en server o JS si quieres) */
#topicsmenu a.link-active{
  background: color-mix(in srgb, var(--brand) 10%, #fff);
  border-color: color-mix(in srgb, var(--brand) 35%, var(--line));
  color: var(--brand-600);
}

/* ===== LINKS GENERALES EN EL CONTENIDO ===== */
#topicsmain a{ color:#0ea5e9; }
#topicsmain a:hover{ text-decoration:underline; }

/* ===== IMÁGENES FLECHA ENTRE PASOS ===== */
#topicsmain img[alt="↓"]{ opacity:.7; display:block; margin:10px auto; }

/* ===== TABLAS ESPEC/OTROS (si llegan a aparecer) ===== */
#topicsmain table{
  width:100%; border-collapse:collapse; margin:10px 0;
  border:1px solid var(--line);
  box-shadow: var(--shadow);
  border-radius:10px; overflow:hidden;
}
#topicsmain th, #topicsmain td{
  border-bottom:1px solid var(--line);
  padding:10px; text-align:left;
}
#topicsmain th{ background:var(--panel); color:var(--ink); }


/* Estilo para el contenedor */
.selfServiceTopicTrendingArticles42 {

  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 12px;
}

/* Título */
.selfServiceTopicTrendingArticles42 h2 {
  font-size: 1.1rem;
  font-weight: bold;
  margin-bottom: 10px;
  color: #333;
}

/* Lista */
.selfServiceTopicTrendingArticles42 ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Ítems */
.selfServiceTopicTrendingArticles42 li a {
  display: block;
  padding: 8px 6px;
  color: #0070d2; /* color Salesforce estándar */
  text-decoration: none;
  border-bottom: 1px solid #eee;
  transition: background-color 0.2s, color 0.2s;
}

.selfServiceTopicTrendingArticles42 li:last-child a {
  border-bottom: none; /* sin borde en el último */
}

/* Hover */
.selfServiceTopicTrendingArticles42 li a:hover {
  background-color: #f4f6f9;
  color: #005fb2;
}

.ui-widget{
  width: 80%;
  margin: 20px auto;
}
#index{
  width: 85%;
  margin: 20px auto;
}