/* ===== Home KB: fila 1 = módulo doble; fila 2 = 3 columnas ===== */

/* El UL pasa a grid */
.AppContainer__homePage ul.WidgetContainer__list{
  display:grid !important;
  grid-template-columns: repeat(6, 1fr);  /* base 6 columnas */
  gap:24px;
  padding-left:0; list-style:none;
}

/* Normalizar los LI (el tema los pone flex) */
.AppContainer__homePage ul.WidgetContainer__list > li.WidgetContainer__contentList{
  display:block !important;
  margin:0; min-width:0;
}

/* --- Fila 1: el primer <li> ocupa todo el ancho --- */
.AppContainer__homePage ul.WidgetContainer__list > li.WidgetContainer__contentList:nth-child(1){
  grid-column: 1 / -1;   /* columnas 1 a 6 */
  grid-row: 1;
}

/* --- Fila 2: 3 columnas (2/6 cada uno) --- */
/* 2) Artículos populares */
.AppContainer__homePage ul.WidgetContainer__list > li.WidgetContainer__contentList:nth-child(2){
  grid-column: 1 / span 2;
  grid-row: 2;
}
/* 3) Artículos recientes */
.AppContainer__homePage ul.WidgetContainer__list > li.WidgetContainer__contentList:nth-child(3){
  grid-column: 3 / span 2;
  grid-row: 2;
}
/* 4) Widget personalizado */
.AppContainer__homePage ul.WidgetContainer__list > li.WidgetContainer__contentList:nth-child(4){
  grid-column: 5 / span 2;
  grid-row: 2;
}

/* Apariencia de card para los 3 de la fila 2 */
.AppContainer__homePage ul.WidgetContainer__list
  > li.WidgetContainer__contentList:nth-child(n+2) .WidgetContainer__boxSplit{
  background:#fff;
  border:1px solid #e2e8f0;
  border-radius:14px;
  padding:18px;
  box-shadow:0 6px 20px rgba(0,0,0,.08);
  height:100%;
  display:flex; flex-direction:column;
}

/* Responsive */
@media (max-width: 900px){
  .AppContainer__homePage ul.WidgetContainer__list{
    grid-template-columns: repeat(2, 1fr);
  }
  .AppContainer__homePage ul.WidgetContainer__list > li.WidgetContainer__contentList{
    grid-column: span 1 !important;
    grid-row: auto !important;
  }
}
@media (max-width: 600px){
  .AppContainer__homePage ul.WidgetContainer__list{
    grid-template-columns: 1fr;
  }
}


/***************** inData — FOOTER (KB) ******************/
:root{
  --idf-bg:#0b0f2a;
  --idf-bg-2:#141936;
  --idf-ink:#E6E9F2;
  --idf-ink-2:#B8C0D9;
  --idf-border:#2B2F54;
  --idf-container:1200px;
}

/* Contenedor principal del footer personalizado */
.indata-footer{
  background:var(--idf-bg);
  color:var(--idf-ink);
  padding:48px 0 0;
  border-top:1px solid var(--idf-border);
  font:16px/1.6 system-ui,-apple-system,Segoe UI,Inter,Roboto,Helvetica,Arial,sans-serif;
}
.indata-footer a{color:var(--idf-ink); text-decoration:none}
.indata-footer a:hover{opacity:.9; text-decoration:underline}

/* Grid de columnas */
.indata-footer__container{
  max-width:var(--idf-container);
  margin:0 auto;
  padding:0 20px 36px;
  display:grid;
  grid-template-columns: 1.3fr 1fr 1fr 1fr;
  gap:32px;
}

/* Branding/legales/partners */
.indata-footer__logo img{height:36px}
.indata-footer__brand .indata-footer__legal{color:var(--idf-ink-2); margin-top:16px}
.indata-footer__aws img{height:40px; margin-top:10px}
.indata-footer__muted{color:var(--idf-ink-2); font-size:.95rem}

/* Títulos y listas */
.indata-footer__title{
  font-weight:700; font-size:1.05rem;
  margin:2px 0 10px; color:var(--idf-ink); position:relative;
}
.indata-footer__title::after{
  content:""; display:block; width:48px; height:2px;
  background:var(--idf-border); margin-top:8px;
}
.indata-footer__list{list-style:none; padding:0; margin:0}
.indata-footer__list li{margin:8px 0}
.indata-footer__list--bullets{list-style:disc; padding-left:18px}

/* Social */
.indata-footer__social{display:flex; gap:10px; margin-top:16px}
.social-btn{
  display:inline-grid; place-items:center;
  width:36px; height:36px; border-radius:999px;
  background:transparent; color:var(--idf-ink);
  border:1px solid var(--idf-border);
}
.social-btn:hover{background:#10163a}

/* Barra inferior */
.indata-footer__bottom{
  background:var(--idf-bg-2);
  border-top:1px solid var(--idf-border);
  margin-top:8px;
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:14px 20px;
}
.indata-footer__bottom__wrap{
  max-width:var(--idf-container); margin:0 auto; width:100%;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.indata-footer__bottom__left a{color:var(--idf-ink-2)}
.indata-footer__bottom__left .sep{color:var(--idf-border); margin:0 10px}
.indata-footer__copyright{color:var(--idf-ink-2)}

/* Responsive */
@media (max-width: 1024px){
  .indata-footer__container{grid-template-columns: 1fr 1fr}
}
@media (max-width: 640px){
  .indata-footer{padding-top:36px}
  .indata-footer__container{grid-template-columns: 1fr}
  .indata-footer__bottom__wrap{flex-direction:column; gap:10px; text-align:center}
}

/* (Opcional) Si quieres ocultar el footer nativo del tema:
.portal-footer{display:none}
*/

/* ============================= */
/*  Reemplazar avatares por logo */
/* ============================= */
.Avatar__avatarImg {
    content: url("https://security.indata.com.co/wp-content/uploads/2023/10/logo_empresa_indata.png") !important;
    width: 32px !important;         /* Tamaño del cuadro */
    height: 32px !important;
    object-fit: contain !important; /* Evita deformaciones */
    border-radius: 0 !important;    /* Cuadrado, no redondo */
    background: #fff !important;    /* Fondo blanco detrás del logo */
    padding: 2px;                   /* Margen interno opcional */
    box-sizing: border-box;
}


/* Estilos para cada bloque de conversación */
.ThreadContainer__articleContent {
    border: 1px solid #ddd !important;  /* Borde gris claro */
    border-radius: 8px !important;      /* Bordes redondeados */
    padding: 12px 16px !important;      /* Espaciado interno */
    margin: 12px 0 !important;          /* Separación entre bloques */
    background: #fff !important;        /* Fondo blanco */
    box-shadow: 0 1px 3px rgba(0,0,0,0.05); /* Sombra suave opcional */
}

/* Dar estilo de tarjeta también al bloque intermedio */
.enduser_comment,
.ThreadContainer__articleContent {
  border: 1px solid #ddd !important;
  border-radius: 8px !important;
  padding: 12px 16px !important;
  margin: 16px 0 !important;
  background: #fff !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

/* ===== Fix color breadcrumb actual (inData) ===== */
/* Fix: último ítem del breadcrumb (inData) */
#breadcrumbs_breadCrumbsDiv > ul > li:last-child,
#breadcrumbs_breadCrumbsDiv > ul > li:last-child * {
  color: #1a1a1a !important;
  opacity: 1 !important;
  font-weight: 500;
}

/* Forzar color del breadcrumb "inData" */
#breadcrumbs_breadCrumbsDiv > ul > li:last-child > span[data-id="ticketForm_breadcrumb_3"],
#breadcrumbs_breadCrumbsDiv > ul > li:last-child > span[data-id="ticketform_breadcrumb_3"]{
  color: #1a1a1a !important;
  opacity: 1 !important;
  font-weight: 500 !important;
}

/* Seguridad: elimina cualquier opacidad en el <li> actual */
#breadcrumbs_breadCrumbsDiv > ul > li:last-child{
  opacity: 1 !important;
}