@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
src: url(https://syscol.com/snet/syapp/fonts/Inter.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* FIX #8: se agregan los pesos 600 y 700 de Inter. El sitio usa font-weight:600/700
   en decenas de reglas pero solo estaba cargado el regular (400), por lo que el
   navegador generaba negrita sintética en vez de usar la tipografía real.
   IMPORTANTE: reemplazar las URLs de abajo por los .woff2 reales de Inter SemiBold
   y Bold que suban a syscol.com/snet/syapp/fonts/ (los nombres son un supuesto). */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 600;
src: url(https://syscol.com/snet/syapp/fonts/Inter-SemiBold.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 700;
src: url(https://syscol.com/snet/syapp/fonts/Inter-Bold.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    font-family: Inter;
}


.body {
 letter-spacing: 0.3px;
}

.commonStyle__link {
    color: #212121;
    letter-spacing: 0px;
}

.TitleContainer__container  {
    border: 1px solid #DFE1EC !important;
    border-radius: 25px !important;
    box-shadow: 0 0 0px rgba(0, 0, 0, 0.5) !important; /* FIX #4: coma -> punto decimal */
    padding: 16px !important;
    background: #fff !important;
    letter-spacing: 0px;
}

.SearchBox__searchpart,
.Header__searchLink,
.kbSearchDiv,
#searchBoxes,
.zd-search-container,
#search_form {
    border-radius: 40px !important;
    border: 1px solid #DFE1EC !important;
    box-shadow: none !important;
}


/* FIX #1: este selector ya NO define el color del texto tipeado (antes usaba el mismo
   gris clarísimo del placeholder y el texto quedaba prácticamente invisible al escribir).
   El color del texto real ahora se hereda del texto normal (#212121); solo el placeholder
   (regla siguiente) usa el gris claro. */
.SearchBox__searchpart input,
.SearchBox__content input,
#searchBoxes input[type="search"],
#searchBoxes input[type="text"],
#search_form input,
.kbSearchDiv input,
.Header__searchSubCont input,
.Header__searchLink input,
#titleSearch input {
    color: #212121 !important;
    border-radius: 40px !important;
}


.SearchBox__searchpart input::placeholder,
.SearchBox__content input::placeholder,
#searchBoxes input::placeholder,
#search_form input::placeholder,
.kbSearchDiv input::placeholder,
.Header__searchSubCont input::placeholder,
.Header__searchLink input::placeholder,
#titleSearch input::placeholder {
    color: #CAD4E7 !important;
}


#searchBtnContainer button,
.SearchBox__searchpart button,
.Header__searchLink button,
#searchBoxes button,
.kbSearchDiv button {
    border-radius: 40px !important;
}



.Header__welcomeDescription {
    text-align: center !important;
    margin-top: 12px !important;
    /* oculta el texto propio de Zoho ("Busca en nuestro Base de conocimientos
       o envía un Ticket.") que aparece si el campo no está vacío; los textos
       visibles salen de ::before y ::after, que tienen tamaño propio */
    font-size: 0 !important;
}


.Header__welcomeDescription::before {
    content: "¿Cómo podemos ayudarte?";
    display: block;
    font-size: 40px;
    line-height: 1.25;
    font-weight: 600;
    color: #212121;
    margin-bottom: 6px;
}


.Header__welcomeTitle {
   color: none;
   font-size: 0px;
   height: 0px;
}


.Header__welcomeDescription::after {
    content: "Aquí encontrarás documentación e información útil sobre como usar nuestras apps y resolver los problemas más comunes";
    display: block;
    font-size: 20px;
    font-weight: 400;
    color: #777777;
    line-height: 1.4;
    max-width: 680px;
    margin: 0 auto;
}

.Header__logotxt {
    font-size: 25px !important;
    font-weight: 700 !important;

}


/* (Se eliminó el truco que reemplazaba "Artículos de Ayuda" por
   "Artículos y Tutoriales" con ::after. Ahora los nombres del menú se
   configuran directo en Zoho: Customize > Tabs > "Artículos" y
   "Video Tutoriales". Así el texto real y el visible coinciden.) */


.Header__logotxt::after {
    content: "| Centro de Ayuda";
    font-size: 20px;
    font-weight: 400;
    color: #333333;
    margin: 0px 0px 0px 5px;


}

#new_ticket_btn {
    background: #1863FD !important;
    border-radius: 26px !important;
    box-shadow: none !important;
    padding: 5px 10px !important;
    min-width: 150px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

#new_ticket_btn .Header__containerLink {
    color: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
}

#new_ticket_btn .Header__tClr {
    color: #ffffff !important;
    font-size: 12px !important;
    margin-right: 6px !important;
    white-space: nowrap !important;
}

#new_ticket_btn .Header__dropicon svg {
    fill: #ffffff !important;
    stroke: #ffffff !important;
}

.Header__stretchynavbg {
    display: none !important;
}


.Button__tagPrimary {
    background: none;
    color: none;
    border: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    width: 0px
}


.ArticlesContainer__articleListWidget {
    margin-bottom: 1.25rem;
    background-color: #fff;
    border: .0625rem solid #CAD4E7;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    border-radius: 25px;
    overflow: hidden;
    background-color: #fff;
}

.CustomerSatisfactionContainer__leftWidget {
    background-color: #fff;
    padding: 1.5625rem;
    border: .0625rem solid #CAD4E7;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.10) !important; /* FIX #4: coma -> punto decimal, ahora la sombra sí se renderiza */
    border-radius: 25px

}

.Button__neutral {
    border: .0625rem solid var(--color-hoverblue1);
    color: #1863fd; /* FIX #3: faltaba el ";" y se perdía este color + la transición */
    transition: all .2s ease;
    border-radius: 25px;
}

.KBSubCategoryContainer__boxView {
    border-radius: 25px !important;
    overflow: hidden !important; /* asegura que el contenido siga el borde redondeado */
}

.ArticleDetailLeftContainer__box, .ArticleDetailLeftContainer__cmdBox {
    background: var(--color-brand);
    padding: 1.25rem;
    overflow: auto;
    border: 1px solid var(--color-lightGrey);
    box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.03);
    border-radius: 25px
}

.ArticleListContainer__boxView {
    border-radius: 25px !important;
    overflow: hidden !important;
}

.ModuleCategoryContainer__containerListView {
    background-color: var(--color-brand);
    padding: 0 .625rem;
    border: 1px solid rgba(0, 0, 0, 0.07);
    border-radius: 25px
}

.TitleContainer__Listcontainer {
    padding: .9375rem .625rem;
    border-radius: 25px
}


.Signup__details {
    padding: 1.875rem 0;
    border: 1px solid var(--color-lightGrey);
    box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.03);
    border-radius: 25px;
    background: var(--color-brand);
    width: 90%;
}

.Input__formInput {
    padding: .575rem .625rem;
    color: var(--color-HexGray20);
    font-size: .8125rem;
    border: .0625rem solid #ddd;
    width: 100%;
    outline: 0;
    border-radius: 25px;
    -webkit-appearance: none;
    font-size: .875rem;
}

.Captcha__captcha {
    overflow: hidden;
    min-height: 8.75rem;
    width: 100%;
    border: .0625rem solid #ddd;
    border-radius: 20px;
    margin: 1.25rem 0 0;
}

.Icon__icon {
    color: #1863fd;

}


.Button__primary {
    background-color: #1863fd;
    color: #ffffff;
    border-radius: 20px;
}


.Signin__details {
    background: var(--color-brand);
    padding: 1.875rem 0;
    border-radius: 25px;
    display: flex;
    width: 90%;
    border: 1px solid #d4dadf;
}

/* FIX #5: se eliminó la redefinición duplicada de .textbox que existía más abajo
   (mismos selectores, dos radios distintos: 20px aquí vs 25px en la otra). Se dejó
   una sola regla combinando ambas para que quede claro cuál manda. */
.textbox {
    color: #000;
    outline: 0;
    text-align: left;
    border-radius: 25px;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    background: #fff;
    box-shadow: none;
    border: 1px solid #ddd;
    width: 100%;
    box-sizing: border-box;
    font-weight: normal;
    transition: all .2s ease-in-out;
    font-family: "Lato", sans-serif;
    text-indent: 0;
}

.blue, .blue#nextbtn {
    background-color: #1863fd;
    color: #fff;
    border-radius: 25px;
}

/* FIX #6: .BreadCrumbs__breadcrumbsView estaba declarada dos veces (la primera con
   color #212121 quedaba como código muerto porque la segunda, con #1863fd, la pisaba).
   Se deja una sola regla. */
.BreadCrumbs__breadcrumbsView {
    font-size: .875rem;
    color: #1863fd;
}

.BreadCrumbs__breadCrumbsLink {
    color: #212121;
}

.BreadCrumbs__breadCrumbsLink:hover {
    color: #1863fd;
}

.btn, #nextbtn.btn {
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
    text-align: center;
    cursor: pointer;
    display: block;
    border-radius: 25px;
    font-size: 14px;
    outline: none;
    margin-bottom: 30px;
    text-transform: initial;
    transition: none;
    border: none;
    height: 40px;
    min-width: 120px;
    padding: 10px 25px;
    text-shadow: 0px 0px 0px #FFF;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: 1px;
    float: none;
}

.Readingprogress__progressBar {
    height: 4px;
    transition: all .2s;
    background: linear-gradient(90deg, #1863fd 16%, #00A7FF 75.89%);
    box-shadow: rgba(0, 0, 0, 0.24) 0 8px 18px;
    border-radius: 0 5px 5px 0;
}

.Icon__fb {
    color: var(--color-fb);
    width: 0px;
}

.Icon__twit {
    color: var(--color-brand1);
    width: 0px;
}

.Icon__linkedin {
    color: var(--color-linkedin);
    width: 0px;
}

.ArticleCmd__fnt600 {
    color: #fff;
    width: 0px;
}

/* --------------------------- */
/* ESTILOS DEL FOOTER SYScol   */
/* --------------------------- */

/* NOTA: el selector original era ".footer_Syscol", que no coincide con el
   contenedor real del DOM (".footer"), por lo que este bloque de fondo/relleno
   nunca se aplicó. Se deja así a propósito: el fondo blanco actual es la
   decisión de diseño vigente (confirmado por el usuario), así que NO se activa
   background/padding aquí para no alterar el look actual. Se conserva solo
   la tipografía/color de texto, que si se quiere aplicar más adelante puede
   moverse a ".footer" sin tocar background/padding. */
.footer_Syscol {
    font-family: "Inter", sans-serif;
    color: #5A5A5A;
}

/* Layout superior */
.footer__top {
    display: flex;
    justify-content: space-between;
    gap: 60px;
    margin-bottom: 50px;
}

/* Columnas */
.footer__col {
    flex: 1;
    min-width: 200px;
}

/* FIX: la imagen original (https://syscol.com/ayuda/screens/Articulos/204_logo.png)
   devolvía un recurso roto (confirmado en el navegador: naturalWidth 0, la
   URL no sirve ningún archivo). Como el <img src> del HTML no se puede editar
   desde acá, se reemplaza visualmente vía CSS con "content: url(...)" apuntando
   al mismo ícono que ya usa el Centro de Ayuda (Header__logo) — funciona en
   Chrome/Firefox/Edge, que es lo que ya usa el resto de esta hoja (:has()).
   Como ese ícono es solo el isotipo (sin el texto "Syscol"), se agrega el
   texto "Syscol" al lado con ::after para mantener el mismo look que antes. */
.footer__brand-title img {
    content: url("https://syscol.zohodesk.com/portal/api/publicImages/1094640000015651017?portalId=edbsn71d035a623c0da1ad624a7d7d716b5f35cc1309be970ab13ba8c42e74cfac28d");
    width: auto;
    height: 36px;
    margin-right: 8px;
    vertical-align: middle;
}

.footer__brand-title::after {
    content: "Syscol";
}

.footer__brand-title {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 6px;
    color: #2A2A2A;
    display: flex;
    align-items: center;
}

.footer__brand-sub {
    font-size: 17px;
    color: #7A7A7A;
    margin-bottom: 25px;
}

/* Íconos sociales */
.footer__social-icons {
    display: flex;
    gap: 16px;
}

.footer__social-icons img {
    width: 35px;
    height: 35px;
    opacity: 0.55;
    transition: opacity .2s ease;
}

.footer__social-icons img:hover {
    opacity: 1;
}

/* Títulos */
.footer__title {
    font-size: 17px;
    font-weight: 700;
    color: #333;
    margin-bottom: 14px;
}

/* Listas */
.footer__list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer__list li {
    margin-bottom: 10px;
}

.footer__list a {
    text-decoration: none;
    color: #666;
    font-size: 15px;
}

.footer__list a:hover {
    color: #1863FD;
}

/* Contacto */
.footer__contact-list {
    list-style: none;
    padding: 0;
}

.footer__contact-list li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    margin-bottom: 10px;
    color: #555;
    text-decoration: none;

}

/* FIX: los links "soporte@/ventas@/contacto@syscol.com" salían con el azul
   por defecto del navegador (rgb(0,0,238)) porque no había ninguna regla
   para ".footer__contact-list a" — el <li> tenía color:#555 pero el <a> hijo
   no lo heredaba. Ahora quedan iguales al resto del texto de contacto. */
.footer__contact-list a {
    color: inherit;
    text-decoration: none;
}

.footer__contact-list a:hover {
    color: #1863FD;
}

/* Divider */
.footer__divider {
    width: 100%;
    height: 1px;
    background: #DDDFE5;
    margin-bottom: 20px;
}

/* Parte inferior */
.footer__bottom {
    text-align: center;
    font-size: 14px;
    color: #808080;
}

/* RESPONSIVE */
@media (max-width: 900px) {
    .footer__top {
        flex-direction: column;
        gap: 40px;
    }

    .footer {
        padding: 40px 30px;
    }

    .footer__social-icons img {
        width: 24px;
        height: 24px;
    }
}

.CustomWidgets__widgetTitle {
    color: none;
    display: block;
    margin: 0 0 .9375rem;
    font-size: 0;
}

.Footer__footer {
    display: none;
    background-color: #F3F4FB;
    color: #afafaf;
}




/* =========================
   MENU VIDEOS
========================= */

.syscol-help {
  max-width:1200px;
  margin:auto;
}

/* TITULOS */
.title {
  text-align: center;
  font-size: 32px;
  margin: 0 0 20px 0;
}

.title2 {
  font-size: 32px;
  margin: 0 0 20px 0;
}

.syscol-help h4 {
  margin: 10px 0 0px 0;
}

.syscol-help h4 span {
  color:#1863fd;
}

.subtitle {
  text-align:center;
  color:#666;
  margin-bottom:20px;
  margin: 2px;
}

.subtitle2 {
  color:#666;
  margin-bottom:20px;
  margin: 2px;
  width: 90%;
}

.lead {
  font-size: 22px;
  color:#1863fd;
  margin-bottom:20px;
  margin: 80px 0px 0px 0px;
}

/* =========================
   MENU HORIZONTAL
========================= */
.menu-scroll {
  display:flex;
  gap:28px;
  overflow-x:auto;
  border-bottom:1px solid #ddd;
  padding-bottom:12px;
  margin: 30px 0 0 0;
}

/* FIX: scrollbar horizontal del menú de módulos — antes se veía la barra
   gruesa/gris predeterminada del sistema (con flechitas en los extremos).
   Se reemplaza por una versión delgada y sutil, en el mismo tono gris del
   borde inferior del menú, y solo se resalta un poco al pasar el mouse. */
.menu-scroll {
  scrollbar-width: thin;                    /* Firefox */
  scrollbar-color: #d0d5dd transparent;     /* Firefox */
}

.menu-scroll::-webkit-scrollbar {
  height: 4px;                              /* Chrome/Edge/Safari */
}

.menu-scroll::-webkit-scrollbar-track {
  background: transparent;
}

.menu-scroll::-webkit-scrollbar-thumb {
  background-color: #d0d5dd;
  border-radius: 10px;
}

.menu-scroll::-webkit-scrollbar-thumb:hover {
  background-color: #b0b8c9;
}

/* TAB BASE */
.menu-scroll .tab {
  text-decoration:none;
  color:#000;
  white-space:nowrap;
  padding-bottom:10px;
  position:relative;
  font-size:15px;
}

/* HOVER */
.menu-scroll .tab:hover {
  color:#1863fd;
}

/* LINEA AZUL */
.menu-scroll .tab::after {
  content:"";
  position:absolute;
  left:0;
  bottom:-1px;
  width:100%;
  height:3px;
  background:#1863fd;
  border-radius:2px;
  transform:scaleX(0);
  transition:transform .25s ease;
}

/* TAB ACTIVO SEGÚN :target */
.syscol-help:has(#primeros_pasos:target) .tab[href="#primeros_pasos"],
.syscol-help:has(#clases:target) .tab[href="#clases"],
.syscol-help:has(#matricula:target) .tab[href="#matricula"],
.syscol-help:has(#recaudacion:target) .tab[href="#recaudacion"],
.syscol-help:has(#agenda:target) .tab[href="#agenda"],
.syscol-help:has(#planificacion:target) .tab[href="#planificacion"],
.syscol-help:has(#pie:target) .tab[href="#pie"],
.syscol-help:has(#firma:target) .tab[href="#firma"],
.syscol-help:has(#control:target) .tab[href="#control"],
.syscol-help:has(#biblioteca:target) .tab[href="#biblioteca"],
.syscol-help:has(#configuracion:target) .tab[href="#configuracion"],
.syscol-help:has(#webinar:target) .tab[href="#webinar"] {
  color:#1863fd;
  font-weight:500;
}


.syscol-help:has(#primeros_pasos:target) .tab[href="#primeros_pasos"]::after,
.syscol-help:has(#clases:target) .tab[href="#clases"]::after,
.syscol-help:has(#matricula:target) .tab[href="#matricula"]::after,
.syscol-help:has(#recaudacion:target) .tab[href="#recaudacion"]::after,
.syscol-help:has(#agenda:target) .tab[href="#agenda"]::after,
.syscol-help:has(#planificacion:target) .tab[href="#planificacion"]::after,
.syscol-help:has(#pie:target) .tab[href="#pie"]::after,
.syscol-help:has(#firma:target) .tab[href="#firma"]::after,
.syscol-help:has(#control:target) .tab[href="#control"]::after,
.syscol-help:has(#biblioteca:target) .tab[href="#biblioteca"]::after,
.syscol-help:has(#configuracion:target) .tab[href="#configuracion"]::after,
.syscol-help:has(#webinar:target) .tab[href="#webinar"]::after
{
  transform:scaleX(1);
}

/* ESTADO INICIAL (CLASES ACTIVO) */
.syscol-help:not(:has(.videos-section:target))
.menu-scroll .tab[href="#clases"] {
  color:#1863fd;
  font-weight:500;
}

.syscol-help:not(:has(.videos-section:target))
.menu-scroll .tab[href="#clases"]::after {
  transform:scaleX(1);
}

/* =========================
   VIDEOS
========================= */
.videos-section {
  display:none; /* ocultas por defecto */
  margin-top:30px;
  grid-template-columns:repeat(4,1fr); /* 4 columnas */
  gap:24px;
}

/* mostrar sección seleccionada */
.videos-section:target {
  display:grid;
}

/* mostrar CLASES por defecto */
.syscol-help:not(:has(.videos-section:target)) #clases {
  display:grid;
}

/* evitar scroll al hacer click */
.videos-section {
  scroll-margin-top: 100vh;
}



/* =========================
   TAGS
========================= */

.video-card {
  display:block;
  border: 1px solid #c9d0e4;
  text-decoration:none;
  color:#000;
  border-radius:14px;
  overflow:hidden;
  background:#fff;
  transition:
    transform .25s ease,
    box-shadow .25s ease;
}

.video-thumb {
  position:relative;
  aspect-ratio:16/9;
  overflow:hidden;
}

.video-thumb img {
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .25s ease;
}

.video-card:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow:0 12px 30px rgba(0,0,0,.18);
}

.video-card:hover img {
  transform: scale(1.08);
}

.video-title {
  padding:14px 16px;
  font-size:15px;
  font-weight:500;
  line-height:1.3;
}



/* =========================
   BOTÓN MÁS TUTORIALES
========================= */

.more-tutorials {
  display:flex;
  justify-content:center;
  margin:60px 0;
}

.more-btn {
  display:inline-block;
  padding:14px 34px;
  border-radius:999px; /* cápsula */
  border:2px solid #d0d5dd;
  background:#fff;
  color:#000;
  text-decoration:none;
  font-size:16px;
  font-weight:500;
  transition:
    background .25s ease,
    color .25s ease,
    border-color .25s ease,
    transform .2s ease,
    box-shadow .2s ease;
}

/* HOVER */
.more-btn:hover {
  background:#1863fd;
  color:#fff;
  border-color:#1863fd;
  transform: translateY(-2px);
  box-shadow:0 8px 20px rgba(24,99,253,.3);
}





/* RESPONSIVE */
@media(max-width:1024px){
  .videos-section {
    grid-template-columns:repeat(2,1fr);
  }
}

@media(max-width:768px){
  .videos-section {
    grid-template-columns:1fr;
  }
}







/* ===============================
   TABLET + MOBILE
   =============================== */
@media (max-width: 1020px) {

  /* Mover menú al fondo */
  .Header__nav {
    position: fixed !important;
    bottom: 0;
    left: 0;

    width: 100%;
    height: 56px;

    background: #ffffff;
    border-top: 1px solid #e5e5e5;
    z-index: 9999;

    display: flex !important;
    justify-content: space-around;
    align-items: center;

    padding: 0;
    margin: 0;

    /* FIX: evitar que Zoho lo oculte */
    visibility: visible !important;
    opacity: 1 !important;
  }

  /* Cada item del menú */
  .Header__menuList,
  #logoutDetails {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  /* Links */
  .Header__link {
    font-size: 13px;
    text-decoration: none;
    color: #6b7280;
    height: 100%;
    display: flex;
    align-items: center;
    white-space: nowrap;
  }

  /* Activo */
  .Header__menuList.Header__navactive .Header__link {
    color: #1a73e8;
    font-weight: 600;
  }

  /* ===============================
     LOGIN / REGISTRO EN UNA FILA
     =============================== */

  /* UL interno */
  #logoutDetails > ul {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    gap: 12px;
    padding: 0;
    margin: 0;
  }

  /* LI internos */
  #logoutDetails li {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  /* Links login */
  #logoutDetails a {
    font-size: 13px;
    white-space: nowrap;
    text-decoration: none;
  }

  /* Evitar que el menú tape contenido */
  body {
    padding-bottom: 56px;
  }
}

/* ===============================
   MOBILE (ajuste fino)
   =============================== */
@media (max-width: 767px) {

  .Header__link,
  #logoutDetails a {
    font-size: 12px;
  }

  #logoutDetails > ul {
    gap: 8px;
  }
}

/* Menú inferior en celular: con 3 pestañas + Iniciar sesión/Registrarse
   no cabía todo en 390px ("Registrarse" quedaba cortado). Cada ítem ahora
   ocupa solo su ancho y se reparten de forma pareja. Probado en 390px. */
@media (max-width: 767px) {
  .Header__nav {
    justify-content: space-evenly !important;
    padding: 0 6px !important;
  }

  .Header__menuList,
  #logoutDetails {
    flex: 0 1 auto !important;
  }

  .Header__link,
  #logoutDetails a {
    font-size: 11.5px !important;
  }

  #logoutDetails > ul {
    gap: 10px !important;
  }
}


/* =========================================================================
   CENTRO DE AYUDA EN 3 SECCIONES: INICIO / ARTÍCULOS / VIDEO TUTORIALES
   =========================================================================
   Funciona junto con la configuración en Zoho (ver guía de pasos):
   permiso "Mostrar Comunidad en el Centro de asistencia" activo, pestaña
   "Comunidad" renombrada a "Video Tutoriales", categoría KB "Video
   Tutoriales" y los widgets "Menu videos" + "Footer Syscol" agregados a
   Comunidad > Inicio, Comunidad > Lista de temas y Base de conocimientos >
   Lista de artículos.

   Zoho pone una clase distinta por página en <portal class="portalContainer ...">
   y este bloque se apoya en eso:
     .home                                → Inicio
     .kbLanding                           → Artículos (/portal/es/kb)
     .communityLanding                    → Video Tutoriales (/portal/es/community)
     .communityList                       → Video Tutoriales cuando la Comunidad
                                            tiene una sola categoría (Zoho
                                            redirige directo a esa categoría)
     .article_subcategory.videotutoriales → página de la categoría KB
                                            "Video Tutoriales" (destino de la
                                            tarjeta nueva de Inicio)
   Las tarjetas de categoría también llevan el nombre como clase:
     .TitleContainer__container.videotutoriales
   ========================================================================= */


/* ---------- Encabezado de Artículos y Video Tutoriales ----------
   Sin buscador, sin "Agregar Ticket" y sin breadcrumb, igual que las
   imágenes de referencia (en Inicio el buscador se mantiene). */
.kbLanding #titleSearch,
:is(.communityLanding, .communityList) #titleSearch,
.article_subcategory.videotutoriales #titleSearch {
  display: none !important;
}


/* ---------- ARTÍCULOS (/kb): solo intro + tarjetas ----------
   El widget "Menu videos" trae las dos partes (videos arriba y el texto
   "¿Necesitas ayuda rápida?" abajo). Aquí se oculta la parte de videos. */
.kbLanding .syscol-help > .title,
.kbLanding .syscol-help > .subtitlecontenedor:not(:has(.subtitle2)),
.kbLanding .syscol-help > .menu-scroll,
.kbLanding .syscol-help > .videos-section,
.kbLanding .syscol-help > .more-tutorials,
.kbLanding .TitleContainer__container.videotutoriales {
  display: none !important;
}

.kbLanding .syscol-help .lead {
  margin-top: 36px;
}


/* ---------- VIDEO TUTORIALES: solo el bloque de videos ---------- */
:is(.communityLanding, .communityList) .syscol-help > div:has(> .lead),
:is(.communityLanding, .communityList) .syscol-help > .title2,
:is(.communityLanding, .communityList) .syscol-help > .subtitlecontenedor:has(.subtitle2),
.article_subcategory.videotutoriales .syscol-help > div:has(> .lead),
.article_subcategory.videotutoriales .syscol-help > .title2,
.article_subcategory.videotutoriales .syscol-help > .subtitlecontenedor:has(.subtitle2) {
  display: none !important;
}

:is(.communityLanding, .communityList) .syscol-help,
.article_subcategory.videotutoriales .syscol-help {
  padding-top: 40px;
}

/* Se oculta todo lo propio de Zoho en esas páginas (lista de artículos,
   columna derecha con "Seguir", populares y recientes) y el widget pasa
   a ocupar todo el ancho */
:is(.communityLanding, .communityList) .Layout__layout2,
.article_subcategory.videotutoriales .Layout__layout2 {
  display: none !important;
}

:is(.communityLanding, .communityList) .Layout__layout1,
.article_subcategory.videotutoriales .Layout__layout1 {
  width: 100% !important;
  max-width: 100% !important;
  flex: 1 1 100% !important;
}

:is(.communityLanding, .communityList) .WidgetsContainer__widgetCont > li:not(:has(.syscol-help)):not(:has(.footer)),
.article_subcategory.videotutoriales .WidgetsContainer__widgetCont > li:not(:has(.syscol-help)):not(:has(.footer)) {
  display: none !important;
}

/* En la Comunidad se ocultan los filtros y la lista de publicaciones que
   Zoho pone fijos en la página (no son widgets) */
:is(.communityLanding, .communityList) .TopicListLeftContainer__filterArea,
:is(.communityLanding, .communityList) .TopicListLeftContainer__pdb40 {
  display: none !important;
}

/* Al activar la Comunidad, Zoho agrega en Inicio los botones
   "Base de conocimientos / Comunidad" sobre las tarjetas y un filtro
   desplegable dentro del buscador. No están en el diseño: se ocultan. */
.ModuleCategoryContainer__tabs {
  visibility: hidden !important; /* se oculta pero conserva su alto, así los
                                    íconos de vista (cuadrícula/lista) quedan
                                    en su lugar */
}

.SearchBox__filterPopup {
  display: none !important;
}

/* Zoho agrega los widgets por TIPO de página, así que "Menu videos" y el
   footer también aparecerían en las demás categorías: ahí se ocultan para
   que esas páginas queden exactamente como están hoy. */
.article_subcategory:not(.videotutoriales) .WidgetsContainer__lftWd:has(.syscol-help),
.article_subcategory:not(.videotutoriales) .WidgetsContainer__lftWd:has(.footer) {
  display: none !important;
}

/* En la categoría "Video Tutoriales" Zoho marca "Artículos" como activo
   (porque técnicamente es una categoría de la base de conocimiento): se
   corrige para que el activo sea "Video Tutoriales", igual que en /community */
.article_subcategory.videotutoriales .Header__menuList:has(> a[href$="/kb"]) .Header__link {
  color: #9a9a9a !important;
  border-bottom-color: transparent !important;
  font-weight: 400 !important;
}

.article_subcategory.videotutoriales .Header__menuList:has(> a[href$="/community"]) .Header__link {
  color: #1863fd !important;
  border-bottom-color: #1863fd !important;
}

@media (max-width: 1020px) {
  .article_subcategory.videotutoriales .Header__menuList:has(> a[href$="/kb"]) .Header__link {
    color: #6b7280 !important;
  }

  .article_subcategory.videotutoriales .Header__menuList:has(> a[href$="/community"]) .Header__link {
    color: #1a73e8 !important;
    font-weight: 600 !important;
  }
}


/* ---------- INICIO: tarjeta "Video Tutoriales" ----------
   La tarjeta la genera Zoho a partir de la categoría KB nueva. Aquí se le
   pone el ícono rojo de play y se reemplaza el contador de artículos por
   el de videos. Si se agregan videos o secciones, actualizar estos números. */
.TitleContainer__container.videotutoriales .Avatar__img {
  content: url("https://syscol.com/ayuda/screens/Articulos/210_videos.png");
}

.TitleContainer__container.videotutoriales .TitleContainer__content > li {
  display: none !important;
}

.TitleContainer__container.videotutoriales .TitleContainer__content::before {
  content: "31 Videos";
  font-size: 13px;
  color: #555;
}

.TitleContainer__container.videotutoriales .TitleContainer__content::after {
  content: "11 Secciones";
  font-size: 13px;
  color: #555;
  padding-left: 19px;
  /* mismo puntito gris separador que usan las demás tarjetas */
  background: radial-gradient(circle, #bdbdbd 1.5px, transparent 1.6px) no-repeat 8px 50% / 3px 3px;
}

/* ---------- INICIO: tarjeta "Video Tutoriales" en vista de LISTA ----------
   En celular (o si el usuario cambia a vista de lista) Zoho no le pone la
   clase .videotutoriales a la tarjeta, así que se identifica por su enlace. */
.TitleContainer__Listcontainer:has(a[href$="/kb/video-tutoriales"]) .Avatar__img {
  content: url("https://syscol.com/ayuda/screens/Articulos/210_videos.png");
}

.TitleContainer__Listcontainer:has(a[href$="/kb/video-tutoriales"]) .TitleContainer__content > li {
  display: none !important;
}

.TitleContainer__Listcontainer:has(a[href$="/kb/video-tutoriales"]) .TitleContainer__content::before {
  content: "31 Videos";
  font-size: 13px;
  color: #555;
}

.TitleContainer__Listcontainer:has(a[href$="/kb/video-tutoriales"]) .TitleContainer__content::after {
  content: "11 Secciones";
  font-size: 13px;
  color: #555;
  padding-left: 19px;
  background: radial-gradient(circle, #bdbdbd 1.5px, transparent 1.6px) no-repeat 8px 50% / 3px 3px;
}


/* ---------- INICIO: la tarjeta "Video Tutoriales" funciona como botón ----------
   Zoho enlaza la tarjeta a su categoría de la Base de conocimiento y ese
   enlace no se puede cambiar sin tocar el HTML. Para que lleve a la pestaña
   "Video Tutoriales" del menú, se estira un área invisible del propio link
   del menú (su ::after) justo encima de la tarjeta, con CSS Anchor
   Positioning. Así, un clic en cualquier parte de la tarjeta es un clic en
   el link del menú. Probado en vivo en escritorio (vista de cuadrícula) y
   en celular (vista de lista).
   En navegadores antiguos que no soportan esta técnica (@supports), la
   tarjeta sigue abriendo su categoría, como antes. */
@supports (anchor-name: --a) {
  .home .TitleContainer__container.videotutoriales,
  .home .TitleContainer__Listcontainer:has(a[href$="/kb/video-tutoriales"]) {
    anchor-name: --syscol-vt-card;
  }

  .home .Header__menuList:has(> a[href$="/community"]) > a::after {
    content: "";
    position: fixed;
    position-anchor: --syscol-vt-card;
    top: anchor(top);
    left: anchor(left);
    right: anchor(right);
    bottom: anchor(bottom);
    z-index: 5;
    border-radius: 25px;
    cursor: pointer;
  }
}