/* ==========================================================
   1. VARIABLES + RESET
   ========================================================== */
:root {
  --brand-dark:  #052a31;
  --brand-green: #01d88a;
  --brand-white: #ffffff;
  --bg-body:     #f5f7f9;
  --text-main:   #052a31;

  --card-radius:   8px;
  --button-radius: 8px;
  --card-shadow:   0 8px 20px rgba(15, 23, 42, 0.06);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body,
h1, h2, h3, h4, h5, h6,
p, a, li, span, div, article {
  font-family: 'Inter', sans-serif !important;
  -webkit-font-smoothing: antialiased;
}

body {
  margin: 0;
  background-color: var(--bg-body) !important;
  color: var(--text-main);
  line-height: 1.6;
}

a {
  text-decoration: none;
  transition: color .15s ease, background-color .15s ease, box-shadow .15s ease;
}

/* Ocultar elementos que no usamos del theme nativo */
#searchBar,
#docsSearch form,
.sidebar form,
#sidebar,
.admin-edit,
.printArticle,
.subscribe,
.most-pop-articles h2,
.category-list h2 {
  display: none !important;
}

/* ==========================================================
   2. NAVBAR
   ========================================================== */

.navbar {
  margin-bottom: 0 !important;
}

.navbar .navbar-inner {
  background: var(--brand-dark) !important;
  border: none !important;
  padding: 10px 0 !important;
}

/* Contenedor alineado con el contenido principal */
.navbar .navbar-inner .container,
.navbar .navbar-inner .container-fluid {
  max-width: 1150px;
  margin: 0 auto;
  padding: 0 16px;
}

/* Logo (izquierda, desktop) */
.navbar .brand {
  float: left !important;
  margin: 0 !important;
  padding: 0 !important;
}
.navbar .brand img {
  display: block !important;
  height: 24px !important;
  width: auto !important;
}

/* Sin menú hamburguesa / colapso */
.navbar .btn-navbar {
  display: none !important;
}
.navbar .nav-collapse,
.navbar .nav-collapse.collapse {
  float: right !important;
  display: block !important;
  height: auto !important;
  overflow: visible !important;
}

/* Navegación (derecha, desktop) */
.navbar .nav {
  float: right !important;
  margin: 0 !important;
}
.navbar .nav li {
  list-style: none !important;
  float: left !important;
  margin-left: 8px;
}

/* Botón nav */
.navbar .nav li a {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 5px 14px !important;
  border-radius: var(--button-radius) !important;
  border: 1px solid rgba(255, 255, 255, .35) !important;
  color: var(--brand-white) !important;
  font-size: 11px !important;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 600 !important;
  line-height: 1 !important;
}
.navbar .nav li a:hover {
  background: var(--brand-white) !important;
  color: var(--brand-dark) !important;
}

/* ==========================================================
   3. HERO HOME
   ========================================================== */

#docsSearch {
  background: var(--brand-dark) !important;
  border: none !important;
  text-align: center;
  padding: 40px 16px 52px !important;
}

#docsSearch h1 {
  color: var(--brand-white) !important;
  font-weight: 800 !important;
  font-size: 32px !important;
  margin: 0 0 8px !important;
  letter-spacing: .02em;
}

.hero-subtitle {
  color: var(--brand-green) !important;
  font-size: 16px !important;
  font-weight: 500;
  margin: 0;
}

/* ==========================================================
   4. CONTENEDOR PRINCIPAL
   ========================================================== */

#contentArea {
  max-width: 1150px !important;
  margin: 32px auto 64px !important;
  padding: 0 16px 64px !important;
}

/* ==========================================================
   5. LISTA DE ARTÍCULOS (HOME)
   ========================================================== */

ul.popArticles,
.category-list {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
}

/* Card */
.popArticles li,
.category-list .category {
  background: var(--brand-white) !important;
  border-radius: var(--card-radius) !important;
  box-shadow: var(--card-shadow) !important;
  border: 1px solid rgba(15, 23, 42, 0.06);
}

/* Enlace ocupa todo el card */
.popArticles li a,
.category-list .category a {
  display: flex !important;
  align-items: center;
  gap: 14px;
  padding: 18px 28px !important;
  height: 100%;
  color: var(--text-main) !important;
}

/* Hover */
.popArticles li a:hover,
.category-list .category a:hover {
  background-color: #f3f4f6;
}

/* Icono */
.popArticles li i,
.category-list .category i,
.icon-article-doc {
  font-size: 20px !important;
  opacity: 0.6;
}

/* Texto card */
.popArticles li span,
.category-list .category span {
  font-size: 16px !important;
  font-weight: 600;
  line-height: 1.5;
  word-break: break-word;
}

/* ==========================================================
   6. PÁGINA DE ARTÍCULO
   ========================================================== */

/* Bootstrap 2 fix: eliminamos margen izquierdo de span9 */
.row-fluid .span9,
#main-content {
  width: 100% !important;
  float: none !important;
  margin-left: 0 !important;
}

.contentWrapper,
#main-content {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* Artículo integrado */
#fullArticle {
  max-width: 860px !important;
  margin: 40px auto 72px !important;
  padding: 0 16px 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  border-top: none !important;
}

#fullArticle h1.title {
  font-size: 32px !important;
  font-weight: 800 !important;
  color: var(--brand-dark) !important;
  margin-bottom: 24px !important;
}

#fullArticle p,
#fullArticle li {
  font-size: 18px !important;
  line-height: 1.8 !important;
  color: #374151 !important;
}

#fullArticle a {
  color: var(--brand-dark) !important;
  font-weight: 600;
  border-bottom: 2px solid var(--brand-green);
}
#fullArticle a:hover {
  background-color: var(--brand-green);
  color: #ffffff !important;
}

/* Footer del artículo */
.articleFoot {
  margin-top: 40px;
  padding-top: 16px;
  border-top: 1px solid #e5e7eb;
  text-align: center;
  font-style: italic;
  font-size: 14px;
  color: #9ca3af;
}

/* ==========================================================
   7. TABLAS RESPONSIVE
   ========================================================== */

.table-responsive {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 16px 0;
}
.table-responsive table {
  width: 100%;
  min-width: 600px;
}

/* ==========================================================
   8. FOOTER GLOBAL
   ========================================================== */

footer {
  text-align: center;
  padding: 32px 16px;
  color: #9ca3af;
  background: var(--bg-body);
}
footer a {
  color: var(--brand-dark) !important;
}
/* Ocultar "Powered by Help Scout" (el span del footer) */
footer span {
  display: none !important;
}

/* ==========================================================
   9. RESPONSIVE
   ========================================================== */

/* Tablet / mobile: cards en 1 columna centrados */
@media (max-width: 900px) {

  #contentArea {
    max-width: 100% !important;
    padding: 0 16px 40px !important;
  }

  ul.popArticles,
  .category-list {
    grid-template-columns: 1fr !important;
    max-width: 680px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    gap: 16px;
  }

  .popArticles li,
  .category-list .category {
    margin: 0 !important;
  }
}

/* Mobile estrecho: navbar en 1 línea + tipografías y artículo más ancho */
@media (max-width: 768px) {

  .navbar .navbar-inner .container,
  .navbar .navbar-inner .container-fluid {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 12px;
  }

  .navbar .brand,
  .navbar .nav-collapse,
  .navbar .nav {
    float: none !important;
  }

  .navbar .nav {
    display: flex !important;
    align-items: center;
    margin: 0 !important;
  }

  .navbar .nav li {
    margin-left: 8px;
  }

  .navbar .brand img {
    height: 20px !important;
  }

  .navbar .nav li a {
    padding: 4px 10px !important;
    font-size: 10px !important;
  }

  #docsSearch {
    padding: 28px 16px 36px !important;
  }

  #docsSearch h1 {
    font-size: 22px !important;
    line-height: 1.3 !important;
  }

  .hero-subtitle {
    font-size: 13px !important;
  }

  #fullArticle {
    max-width: 100% !important;
    width: 100% !important;
    margin: 20px 8px 36px !important;
    padding: 0 !important;
  }

  #fullArticle h1.title {
    font-size: 24px !important;
    line-height: 1.3 !important;
    margin-bottom: 18px !important;
  }

  #fullArticle h2 {
    font-size: 20px !important;
    margin: 24px 0 12px !important;
  }

  #fullArticle p,
  #fullArticle li {
    font-size: 16px !important;
    line-height: 1.7 !important;
    margin-bottom: 18px !important;
  }

  .popArticles li a,
  .category-list .category a {
    padding: 16px 22px !important;
    gap: 12px;
  }

  .popArticles li span,
  .category-list .category span {
    font-size: 15px !important;
  }

  .popArticles li,
  .category-list .category {
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.06) !important;
  }
}

/* ==========================================================
   10. BOTÓN FLOTANTE PARA ABRIR BEACON EN DOCS
   ========================================================== */

.docs-beacon-launcher {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 52px;
  height: 52px;
  border-radius: 999px;
  background: var(--brand-dark);
  color: #ffffff;
  border: none;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.35);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 700;
  z-index: 100000;
}

.docs-beacon-launcher:hover {
  background: var(--brand-green);
}

@media (max-width: 768px) {
  .docs-beacon-launcher {
    right: 16px;
    bottom: 16px;
    width: 48px;
    height: 48px;
    font-size: 22px;
  }
}