/* =========================================================
   K-CONTROL / KINGMAR - MENÚ CLIENTES MODERNO SIN SIDEBAR
   Solo header + tarjetas + footer
   ========================================================= */

:root {
  --km-primary: #0d3a62;
  --km-primary-dark: #062946;
  --km-primary-light: #115489;
  --km-blue: #1f6fff;

  --km-bg: #f5f8fc;
  --km-card: #ffffff;
  --km-text: #112f4f;
  --km-muted: #65788c;
  --km-border: #dfe7f1;

  --km-orange: #ff7a1a;
  --km-green: #21a65b;
  --km-purple: #6d5dfc;

  --km-radius: 18px;
  --km-radius-lg: 24px;

  --km-shadow-sm: 0 6px 18px rgba(14, 42, 71, 0.06);
  --km-shadow: 0 12px 30px rgba(14, 42, 71, 0.10);
}

/* =========================================================
   BASE
   ========================================================= */

body {
  background: var(--km-bg) !important;
  color: var(--km-text);
  font-family: "Segoe UI", "Inter", "Helvetica Neue", Arial, sans-serif;
}

.body-wrapper,
.body-innerwrapper {
  background: var(--km-bg) !important;
}

a {
  text-decoration: none !important;
}

/* =========================================================
   HEADER SUPERIOR
   ========================================================= */

#sp-header {
  position: relative !important;
  width: 100% !important;
  height: auto !important;
  min-height: 82px;
  background: rgba(255,255,255,.96) !important;
  border-bottom: 1px solid var(--km-border) !important;
  box-shadow: 0 4px 18px rgba(14, 42, 71, .05);
  z-index: 20;
}

#sp-header .container {
  width: min(1380px, calc(100% - 44px)) !important;
  max-width: 1380px !important;
}

#sp-header .row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#sp-logo,
#sp-menu {
  float: none !important;
}

#sp-logo .logo img {
  max-height: 68px !important;
  width: auto !important;
  object-fit: contain;
}

/* Botón hamburguesa */
#offcanvas-toggler {
  width: 46px;
  height: 46px;
  border: 1px solid var(--km-border);
  border-radius: 14px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  background: #fff;
  color: var(--km-primary) !important;
  box-shadow: var(--km-shadow-sm);
  transition: all .2s ease;
}

#offcanvas-toggler:hover {
  transform: translateY(-1px);
  box-shadow: var(--km-shadow);
}

#offcanvas-toggler i {
  color: var(--km-primary) !important;
}

/* =========================================================
   LAYOUT PRINCIPAL
   ========================================================= */

#sp-main-body {
  padding: 34px 0 28px !important;
  background: var(--km-bg) !important;
}

#sp-main-body .container,
#sp-footer .container {
  width: min(1380px, calc(100% - 44px)) !important;
  max-width: 1380px !important;
}

/* Asegura que no haya sidebar */
#sp-main-body,
#sp-footer {
  margin-left: 0 !important;
  width: 100% !important;
}

/* =========================================================
   ENCABEZADO DE LA PANTALLA
   ========================================================= */

/* Contenedor general */
#sp-component .sp-column {
  background: transparent !important;
}

/* Limpieza de tablas/espacios viejos */
[itemprop="articleBody"] > table[style*="height"],
.articleBody > table[style*="height"],
.item-page > table[style*="height"] {
  display: none !important;
}

[itemprop="articleBody"] > p:empty,
.articleBody > p:empty,
.item-page > p:empty {
  display: none !important;
}

/* Texto general */
[itemprop="articleBody"] p,
.articleBody p,
.item-page p {
  color: var(--km-muted);
  font-size: 15px;
}

/* Logo KCTRL o logos superiores */
[itemprop="articleBody"] > p img,
.articleBody > p img,
.item-page > p img,
.item-page img[src*="KCTRL"],
.item-page img[src*="kctrl"],
.item-page img[src*="K-Control"] {
  max-width: 150px;
  height: auto;
}

/* =========================================================
   TARJETAS DEL MENÚ
   Convierte ul.nav.menu en cards
   ========================================================= */

[itemprop="articleBody"] ul.nav.menu,
.articleBody ul.nav.menu,
.item-page ul.nav.menu,
ul.nav.menu {
  list-style: none !important;
  margin: 34px auto 24px !important;
  padding: 0 !important;

  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 16px !important;

  max-width: 980px;
}

/* Cada item */
[itemprop="articleBody"] ul.nav.menu > li,
.articleBody ul.nav.menu > li,
.item-page ul.nav.menu > li,
ul.nav.menu > li {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

/* Link como tarjeta */
[itemprop="articleBody"] ul.nav.menu > li > a,
.articleBody ul.nav.menu > li > a,
.item-page ul.nav.menu > li > a,
ul.nav.menu > li > a {
  display: flex !important;
  align-items: center !important;
  gap: 22px !important;

  min-height: 96px;
  padding: 20px 26px !important;

  background: var(--km-card) !important;
  border: 1px solid var(--km-border) !important;
  border-radius: 20px !important;
  box-shadow: var(--km-shadow-sm) !important;

  color: var(--km-primary-dark) !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;

  position: relative;
  overflow: hidden;
  transition: all .22s ease;
}

/* Barra lateral de color en tarjeta */
[itemprop="articleBody"] ul.nav.menu > li > a::before,
.articleBody ul.nav.menu > li > a::before,
.item-page ul.nav.menu > li > a::before,
ul.nav.menu > li > a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 6px;
  background: var(--km-primary-light);
}

/* Hover tarjeta */
[itemprop="articleBody"] ul.nav.menu > li > a:hover,
.articleBody ul.nav.menu > li > a:hover,
.item-page ul.nav.menu > li > a:hover,
ul.nav.menu > li > a:hover {
  transform: translateY(-2px);
  box-shadow: var(--km-shadow) !important;
  border-color: #cbd9e8 !important;
}

/* Flecha derecha */
[itemprop="articleBody"] ul.nav.menu > li > a::after,
.articleBody ul.nav.menu > li > a::after,
.item-page ul.nav.menu > li > a::after,
ul.nav.menu > li > a::after {
  content: "›";
  margin-left: auto;

  width: 48px;
  height: 48px;
  min-width: 48px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border-radius: 50%;
  background: #eef5ff;
  color: var(--km-blue);

  font-size: 34px;
  font-weight: 300;
  line-height: 1;
  transition: all .2s ease;
}

[itemprop="articleBody"] ul.nav.menu > li > a:hover::after,
.articleBody ul.nav.menu > li > a:hover::after,
.item-page ul.nav.menu > li > a:hover::after,
ul.nav.menu > li > a:hover::after {
  background: #e3efff;
  transform: translateX(3px);
}

/* Logos dentro de tarjetas */
[itemprop="articleBody"] ul.nav.menu > li > a img,
.articleBody ul.nav.menu > li > a img,
.item-page ul.nav.menu > li > a img,
ul.nav.menu > li > a img {
  width: 96px !important;
  max-width: 96px !important;
  height: 58px !important;
  max-height: 58px !important;
  object-fit: contain !important;

  padding: 8px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid #edf2f7;

  flex: 0 0 96px;
}

/* =========================================================
   COLORES POR TIPO DE LINK
   ========================================================= */

/* Carpetas digitales / K-Control */
ul.nav.menu > li > a[href*="carpeta"]::before,
ul.nav.menu > li > a[href*="digital"]::before,
ul.nav.menu > li > a[href*="kcontrol"]::before {
  background: var(--km-orange);
}

ul.nav.menu > li > a[href*="carpeta"]::after,
ul.nav.menu > li > a[href*="digital"]::after,
ul.nav.menu > li > a[href*="kcontrol"]::after {
  background: #fff1e5;
  color: var(--km-orange);
}

/* Waldos */
ul.nav.menu > li > a[href*="waldos"]::before {
  background: var(--km-green);
}

ul.nav.menu > li > a[href*="waldos"]::after {
  background: #e8f7ee;
  color: var(--km-green);
}

/* CJF */
ul.nav.menu > li > a[href*="cjf"]::before {
  background: #1d4f91;
}

ul.nav.menu > li > a[href*="cjf"]::after {
  background: #eef5ff;
  color: #1d4f91;
}

/* Firmas */
ul.nav.menu > li > a[href*="firma"]::before,
ul.nav.menu > li > a[href*="firmas"]::before {
  background: var(--km-purple);
}

ul.nav.menu > li > a[href*="firma"]::after,
ul.nav.menu > li > a[href*="firmas"]::after {
  background: #f1efff;
  color: var(--km-purple);
}

/* =========================================================
   VISTO
   ========================================================= */

[itemprop="articleBody"] p:has(img[src*="eye"]),
.articleBody p:has(img[src*="eye"]),
.item-page p:has(img[src*="eye"]) {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 1px solid var(--km-border);
  border-radius: 14px;
  padding: 12px 16px;
  box-shadow: var(--km-shadow-sm);
  color: var(--km-muted);
  font-weight: 700;
  margin-left: calc((100% - 980px) / 2);
}

/* =========================================================
   FOOTER
   ========================================================= */

#sp-footer {
  background: transparent !important;
  color: var(--km-text);
  padding: 0 0 30px !important;
}

#sp-footer .sp-column {
  background: #fff;
  border: 1px solid var(--km-border);
  border-radius: 24px;
  box-shadow: var(--km-shadow-sm);
  padding: 20px 24px;
  text-align: center;
}

#sp-footer .sp-module-title {
  color: var(--km-primary-dark);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .02em;
  margin-bottom: 10px;
}

#sp-footer .breadcrumb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #f8fbff;
  border: 1px solid var(--km-border);
  border-radius: 14px;
  padding: 11px 18px;
  margin: 0 0 16px !important;
  flex-wrap: wrap;
}

#sp-footer .sp-copyright {
  display: block;
  color: var(--km-muted);
  font-size: 14px;
}

#sp-footer .sp-copyright img {
  margin-top: 12px;
  width: 70px;
  height: 70px;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1100px) {
  #sp-header .container,
  #sp-main-body .container,
  #sp-footer .container {
    width: calc(100% - 28px) !important;
  }
}

@media (max-width: 768px) {
  ul.nav.menu {
    max-width: 100%;
  }

  ul.nav.menu > li > a {
    min-height: 86px;
    padding: 16px 18px !important;
    gap: 16px !important;
    font-size: 15px !important;
  }

  ul.nav.menu > li > a img {
    width: 74px !important;
    max-width: 74px !important;
    height: 48px !important;
    max-height: 48px !important;
    flex-basis: 74px;
  }

  ul.nav.menu > li > a::after {
    width: 40px;
    height: 40px;
    min-width: 40px;
    font-size: 28px;
  }

  [itemprop="articleBody"] p:has(img[src*="eye"]),
  .articleBody p:has(img[src*="eye"]),
  .item-page p:has(img[src*="eye"]) {
    margin-left: 0;
  }
}


/* =========================================================
   FIX: NO TOCAR SIDEBAR / OFFCANVAS
   Solo aplica tarjetas dentro del contenido principal
   ========================================================= */

/* Primero regresamos cualquier nav menu del sidebar a su estado normal */
#sp-header ul.nav.menu,
#sp-menu ul.nav.menu,
.offcanvas-menu ul.nav.menu,
.offcanvas-menu .nav.menu,
.offcanvas-inner ul.nav.menu,
.offcanvas-inner .nav.menu {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  max-width: none !important;
}

#sp-header ul.nav.menu > li,
#sp-menu ul.nav.menu > li,
.offcanvas-menu ul.nav.menu > li,
.offcanvas-inner ul.nav.menu > li {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
}

#sp-header ul.nav.menu > li > a,
#sp-menu ul.nav.menu > li > a,
.offcanvas-menu ul.nav.menu > li > a,
.offcanvas-inner ul.nav.menu > li > a {
  display: block !important;
  min-height: initial !important;
  padding: initial !important;
  gap: initial !important;
  background: initial !important;
  border: initial !important;
  border-radius: initial !important;
  box-shadow: initial !important;
  color: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
  transform: none !important;
}

/* Quita barras y flechas del sidebar */
#sp-header ul.nav.menu > li > a::before,
#sp-header ul.nav.menu > li > a::after,
#sp-menu ul.nav.menu > li > a::before,
#sp-menu ul.nav.menu > li > a::after,
.offcanvas-menu ul.nav.menu > li > a::before,
.offcanvas-menu ul.nav.menu > li > a::after,
.offcanvas-inner ul.nav.menu > li > a::before,
.offcanvas-inner ul.nav.menu > li > a::after {
  content: none !important;
  display: none !important;
}

/* Imágenes del sidebar normales */
#sp-header ul.nav.menu > li > a img,
#sp-menu ul.nav.menu > li > a img,
.offcanvas-menu ul.nav.menu > li > a img,
.offcanvas-inner ul.nav.menu > li > a img {
  width: auto !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: none !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  flex: initial !important;
}

/* =========================================================
   TARJETAS SOLO EN CONTENIDO PRINCIPAL
   ========================================================= */

#sp-main-body #sp-component .sp-column ul.nav.menu {
  list-style: none !important;
  margin: 34px auto 24px !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 16px !important;
  max-width: 980px !important;
}

#sp-main-body #sp-component .sp-column ul.nav.menu > li {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

#sp-main-body #sp-component .sp-column ul.nav.menu > li > a {
  display: flex !important;
  align-items: center !important;
  gap: 22px !important;
  min-height: 96px;
  padding: 20px 26px !important;
  background: #ffffff !important;
  border: 1px solid #dfe7f1 !important;
  border-radius: 20px !important;
  box-shadow: 0 6px 18px rgba(14, 42, 71, 0.06) !important;
  color: #062946 !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
  position: relative;
  overflow: hidden;
  transition: all .22s ease;
}

#sp-main-body #sp-component .sp-column ul.nav.menu > li > a:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(14, 42, 71, 0.10) !important;
  border-color: #cbd9e8 !important;
}

#sp-main-body #sp-component .sp-column ul.nav.menu > li > a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 6px;
  background: #115489;
}

#sp-main-body #sp-component .sp-column ul.nav.menu > li > a::after {
  content: "›";
  margin-left: auto;
  width: 48px;
  height: 48px;
  min-width: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #eef5ff;
  color: #1f6fff;
  font-size: 34px;
  font-weight: 300;
  line-height: 1;
  transition: all .2s ease;
}

#sp-main-body #sp-component .sp-column ul.nav.menu > li > a:hover::after {
  background: #e3efff;
  transform: translateX(3px);
}

#sp-main-body #sp-component .sp-column ul.nav.menu > li > a img {
  width: 96px !important;
  max-width: 96px !important;
  height: 58px !important;
  max-height: 58px !important;
  object-fit: contain !important;
  padding: 8px !important;
  border-radius: 16px !important;
  background: #fff !important;
  border: 1px solid #edf2f7 !important;
  flex: 0 0 96px !important;
}

/* Colores por tipo de link, solo en contenido */
#sp-main-body #sp-component .sp-column ul.nav.menu > li > a[href*="carpeta"]::before,
#sp-main-body #sp-component .sp-column ul.nav.menu > li > a[href*="digital"]::before,
#sp-main-body #sp-component .sp-column ul.nav.menu > li > a[href*="kcontrol"]::before {
  background: #ff7a1a;
}

#sp-main-body #sp-component .sp-column ul.nav.menu > li > a[href*="carpeta"]::after,
#sp-main-body #sp-component .sp-column ul.nav.menu > li > a[href*="digital"]::after,
#sp-main-body #sp-component .sp-column ul.nav.menu > li > a[href*="kcontrol"]::after {
  background: #fff1e5;
  color: #ff7a1a;
}

#sp-main-body #sp-component .sp-column ul.nav.menu > li > a[href*="waldos"]::before {
  background: #21a65b;
}

#sp-main-body #sp-component .sp-column ul.nav.menu > li > a[href*="waldos"]::after {
  background: #e8f7ee;
  color: #21a65b;
}

#sp-main-body #sp-component .sp-column ul.nav.menu > li > a[href*="cjf"]::before {
  background: #1d4f91;
}

#sp-main-body #sp-component .sp-column ul.nav.menu > li > a[href*="firma"]::before,
#sp-main-body #sp-component .sp-column ul.nav.menu > li > a[href*="firmas"]::before {
  background: #6d5dfc;
}

#sp-main-body #sp-component .sp-column ul.nav.menu > li > a[href*="firma"]::after,
#sp-main-body #sp-component .sp-column ul.nav.menu > li > a[href*="firmas"]::after {
  background: #f1efff;
  color: #6d5dfc;
}



/* =========================================================
   AJUSTE SOLO MENU / SIDEBAR / OFFCANVAS
   No afecta las tarjetas del contenido
   ========================================================= */

/* Contenedor del menú lateral/offcanvas */
.offcanvas-menu,
.offcanvas-inner,
.offcanvas-menu .offcanvas-inner {
  padding-left: 18px !important;
  padding-right: 18px !important;
}

/* Lista del menú */
.offcanvas-menu ul.nav.menu,
.offcanvas-inner ul.nav.menu,
#sp-menu ul.nav.menu {
  padding-left: 8px !important;
  padding-right: 8px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Items del menú */
.offcanvas-menu ul.nav.menu > li,
.offcanvas-inner ul.nav.menu > li,
#sp-menu ul.nav.menu > li {
  margin-bottom: 4px !important;
}

/* Links del menú: más aire y letra más chica */
.offcanvas-menu ul.nav.menu > li > a,
.offcanvas-inner ul.nav.menu > li > a,
#sp-menu ul.nav.menu > li > a {
  padding: 10px 14px !important;
  font-size: 13px !important;
  line-height: 1.3 !important;
  font-weight: 600 !important;
  border-radius: 10px !important;
}

/* Submenús si existen */
.offcanvas-menu ul.nav.menu ul,
.offcanvas-inner ul.nav.menu ul,
#sp-menu ul.nav.menu ul {
  padding-left: 14px !important;
  margin-top: 4px !important;
}

/* Links de submenú */
.offcanvas-menu ul.nav.menu ul li a,
.offcanvas-inner ul.nav.menu ul li a,
#sp-menu ul.nav.menu ul li a {
  padding: 8px 12px !important;
  font-size: 12.5px !important;
  line-height: 1.3 !important;
}

/* Iconos dentro del menú, si existen */
.offcanvas-menu ul.nav.menu > li > a i,
.offcanvas-inner ul.nav.menu > li > a i,
#sp-menu ul.nav.menu > li > a i {
  font-size: 13px !important;
  margin-right: 8px !important;
}

/* Evita que el texto quede pegado al borde izquierdo */
.offcanvas-menu .sp-module,
.offcanvas-inner .sp-module {
  padding-left: 6px !important;
  padding-right: 6px !important;
}

/* En móvil, un poco más compacto */
@media (max-width: 768px) {
  .offcanvas-menu,
  .offcanvas-inner,
  .offcanvas-menu .offcanvas-inner {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  .offcanvas-menu ul.nav.menu > li > a,
  .offcanvas-inner ul.nav.menu > li > a,
  #sp-menu ul.nav.menu > li > a {
    font-size: 12.5px !important;
    padding: 9px 12px !important;
  }
}



/* =========================================================
   K-CONTROL - CARPETA DIGITAL INTERNA
   Solo afecta contenido interno, NO menú/sidebar
   ========================================================= */

/* Área principal interna */
#sp-main-body #sp-component .sp-column {
  background: transparent !important;
}

/* Contenedor general del contenido */
#sp-main-body #sp-component .sp-column .item-page,
#sp-main-body #sp-component .sp-column [itemprop="articleBody"],
#sp-main-body #sp-component .sp-column .articleBody {
  padding: 0 !important;
}

/* Título principal interno */
#sp-main-body #sp-component h1,
#sp-main-body #sp-component h2,
#sp-main-body #sp-component .page-header h1 {
  color: #082946 !important;
  font-size: clamp(30px, 3vw, 46px) !important;
  font-weight: 850 !important;
  letter-spacing: -0.03em !important;
  margin: 0 0 10px !important;
  line-height: 1.1 !important;
}

/* Subtítulo tipo "Biblioteca documental" */
#sp-main-body #sp-component .muted,
#sp-main-body #sp-component .subtitle,
#sp-main-body #sp-component p small {
  color: #65788c !important;
  font-size: 15px !important;
}

/* Barra superior interna: upload, search, selector */
#sp-main-body #sp-component .folder-toolbar,
#sp-main-body #sp-component .digital-toolbar,
#sp-main-body #sp-component .toolbar,
#sp-main-body #sp-component .btn-toolbar {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 16px !important;
  flex-wrap: wrap !important;
  margin: 0 0 24px !important;
}

/* Botón Upload */
#sp-main-body #sp-component a[href*="upload"],
#sp-main-body #sp-component button[name*="upload"],
#sp-main-body #sp-component .btn-upload,
#sp-main-body #sp-component .upload,
#sp-main-body #sp-component .btn-primary {
  min-height: 48px !important;
  padding: 12px 22px !important;
  border-radius: 14px !important;
  background: linear-gradient(180deg, #115489, #0d3a62) !important;
  border: 0 !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  box-shadow: 0 10px 22px rgba(13, 58, 98, 0.20) !important;
  text-shadow: none !important;
  transition: all .2s ease !important;
}

#sp-main-body #sp-component a[href*="upload"]:hover,
#sp-main-body #sp-component button[name*="upload"]:hover,
#sp-main-body #sp-component .btn-upload:hover,
#sp-main-body #sp-component .upload:hover,
#sp-main-body #sp-component .btn-primary:hover {
  filter: brightness(1.05) !important;
  transform: translateY(-1px) !important;
}

/* Inputs de búsqueda y selects internos */
#sp-main-body #sp-component input[type="search"],
#sp-main-body #sp-component input[type="text"],
#sp-main-body #sp-component select {
  min-height: 48px !important;
  border: 1px solid #dbe6f2 !important;
  border-radius: 14px !important;
  background: #ffffff !important;
  color: #0b2d4d !important;
  padding: 10px 16px !important;
  box-shadow: none !important;
  font-size: 15px !important;
}

#sp-main-body #sp-component input[type="search"]:focus,
#sp-main-body #sp-component input[type="text"]:focus,
#sp-main-body #sp-component select:focus {
  outline: none !important;
  border-color: #8ab6ff !important;
  box-shadow: 0 0 0 4px rgba(31, 111, 255, 0.12) !important;
}

/* =========================================================
   GRID DE CARPETAS / CATEGORÍAS
   ========================================================= */

/* Contenedores comunes de carpetas */
#sp-main-body #sp-component .folders,
#sp-main-body #sp-component .folder-list,
#sp-main-body #sp-component .categories,
#sp-main-body #sp-component .category-list,
#sp-main-body #sp-component .document-list,
#sp-main-body #sp-component .items-row,
#sp-main-body #sp-component .blog,
#sp-main-body #sp-component .item-list {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(260px, 1fr)) !important;
  gap: 16px 22px !important;
  margin-top: 22px !important;
}

/* Si las carpetas vienen como ul */
#sp-main-body #sp-component ul.nav.menu,
#sp-main-body #sp-component ul.categories-module,
#sp-main-body #sp-component ul.category-module,
#sp-main-body #sp-component ul.latestnews,
#sp-main-body #sp-component ul.archive-module {
  list-style: none !important;
  padding: 0 !important;
  margin: 22px 0 0 !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(260px, 1fr)) !important;
  gap: 16px 22px !important;
}

/* Items si vienen como li */
#sp-main-body #sp-component ul.nav.menu > li,
#sp-main-body #sp-component ul.categories-module > li,
#sp-main-body #sp-component ul.category-module > li,
#sp-main-body #sp-component ul.latestnews > li,
#sp-main-body #sp-component ul.archive-module > li {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Tarjeta genérica interna */
#sp-main-body #sp-component .folder-card,
#sp-main-body #sp-component .category-card,
#sp-main-body #sp-component .document-card,
#sp-main-body #sp-component .catItem,
#sp-main-body #sp-component .item,
#sp-main-body #sp-component ul.nav.menu > li > a,
#sp-main-body #sp-component ul.categories-module > li > a,
#sp-main-body #sp-component ul.category-module > li > a,
#sp-main-body #sp-component ul.latestnews > li > a,
#sp-main-body #sp-component ul.archive-module > li > a {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;

  min-height: 86px !important;
  padding: 18px 20px !important;

  background: #ffffff !important;
  border: 1px solid #dfe7f1 !important;
  border-radius: 18px !important;
  box-shadow: 0 6px 18px rgba(14, 42, 71, 0.06) !important;

  color: #082946 !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;

  transition: all .22s ease !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Hover tarjeta */
#sp-main-body #sp-component .folder-card:hover,
#sp-main-body #sp-component .category-card:hover,
#sp-main-body #sp-component .document-card:hover,
#sp-main-body #sp-component .catItem:hover,
#sp-main-body #sp-component .item:hover,
#sp-main-body #sp-component ul.nav.menu > li > a:hover,
#sp-main-body #sp-component ul.categories-module > li > a:hover,
#sp-main-body #sp-component ul.category-module > li > a:hover,
#sp-main-body #sp-component ul.latestnews > li > a:hover,
#sp-main-body #sp-component ul.archive-module > li > a:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 30px rgba(14, 42, 71, 0.10) !important;
  border-color: #cbd9e8 !important;
}

/* Ícono de carpeta visual cuando no hay imagen */
#sp-main-body #sp-component .folder-card::before,
#sp-main-body #sp-component .category-card::before,
#sp-main-body #sp-component .document-card::before,
#sp-main-body #sp-component ul.nav.menu > li > a::before,
#sp-main-body #sp-component ul.categories-module > li > a::before,
#sp-main-body #sp-component ul.category-module > li > a::before,
#sp-main-body #sp-component ul.latestnews > li > a::before,
#sp-main-body #sp-component ul.archive-module > li > a::before {
  content: "📁";
  width: 52px !important;
  height: 52px !important;
  min-width: 52px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  border-radius: 50% !important;
  background: #edf4ff !important;
  color: #2b6fff !important;
  font-size: 24px !important;
}

/* Si sí hay imagen/icono dentro de la tarjeta, lo normalizamos */
#sp-main-body #sp-component .folder-card img,
#sp-main-body #sp-component .category-card img,
#sp-main-body #sp-component .document-card img,
#sp-main-body #sp-component ul.nav.menu > li > a img,
#sp-main-body #sp-component ul.categories-module > li > a img,
#sp-main-body #sp-component ul.category-module > li > a img {
  width: 52px !important;
  height: 52px !important;
  min-width: 52px !important;
  object-fit: contain !important;
  border-radius: 50% !important;
  background: #edf4ff !important;
  padding: 12px !important;
}

/* Oculta ícono generado si hay imagen como primer elemento */
#sp-main-body #sp-component ul.nav.menu > li > a:has(img)::before,
#sp-main-body #sp-component ul.categories-module > li > a:has(img)::before,
#sp-main-body #sp-component ul.category-module > li > a:has(img)::before {
  display: none !important;
}

/* Conteo tipo (1 Documento) */
#sp-main-body #sp-component .folder-card small,
#sp-main-body #sp-component .category-card small,
#sp-main-body #sp-component .document-card small,
#sp-main-body #sp-component .folder-card span,
#sp-main-body #sp-component .category-card span,
#sp-main-body #sp-component .document-card span {
  color: #65788c !important;
  font-weight: 500 !important;
  font-size: 13px !important;
}

/* Acciones editar / borrar */
#sp-main-body #sp-component .folder-card .actions,
#sp-main-body #sp-component .category-card .actions,
#sp-main-body #sp-component .document-card .actions,
#sp-main-body #sp-component .item-actions {
  margin-left: auto !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

/* Iconos de acciones */
#sp-main-body #sp-component .folder-card a[href*="edit"],
#sp-main-body #sp-component .category-card a[href*="edit"],
#sp-main-body #sp-component .document-card a[href*="edit"],
#sp-main-body #sp-component .folder-card a[href*="delete"],
#sp-main-body #sp-component .category-card a[href*="delete"],
#sp-main-body #sp-component .document-card a[href*="delete"] {
  color: #8b98a8 !important;
  font-size: 14px !important;
}

/* =========================================================
   FOOTER INTERNO
   ========================================================= */

#sp-footer {
  background: transparent !important;
  color: #112f4f !important;
  padding: 0 0 30px !important;
}

#sp-footer .sp-column {
  background: #ffffff !important;
  border: 1px solid #dfe7f1 !important;
  border-radius: 24px !important;
  box-shadow: 0 6px 18px rgba(14, 42, 71, 0.06) !important;
  padding: 20px 24px !important;
  text-align: center !important;
}

#sp-footer .sp-copyright {
  display: block !important;
  color: #65788c !important;
  font-size: 14px !important;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1200px) {
  #sp-main-body #sp-component .folders,
  #sp-main-body #sp-component .folder-list,
  #sp-main-body #sp-component .categories,
  #sp-main-body #sp-component .category-list,
  #sp-main-body #sp-component .document-list,
  #sp-main-body #sp-component .items-row,
  #sp-main-body #sp-component .blog,
  #sp-main-body #sp-component .item-list,
  #sp-main-body #sp-component ul.nav.menu,
  #sp-main-body #sp-component ul.categories-module,
  #sp-main-body #sp-component ul.category-module,
  #sp-main-body #sp-component ul.latestnews,
  #sp-main-body #sp-component ul.archive-module {
    grid-template-columns: repeat(2, minmax(260px, 1fr)) !important;
  }
}

@media (max-width: 700px) {
  #sp-main-body #sp-component .folders,
  #sp-main-body #sp-component .folder-list,
  #sp-main-body #sp-component .categories,
  #sp-main-body #sp-component .category-list,
  #sp-main-body #sp-component .document-list,
  #sp-main-body #sp-component .items-row,
  #sp-main-body #sp-component .blog,
  #sp-main-body #sp-component .item-list,
  #sp-main-body #sp-component ul.nav.menu,
  #sp-main-body #sp-component ul.categories-module,
  #sp-main-body #sp-component ul.category-module,
  #sp-main-body #sp-component ul.latestnews,
  #sp-main-body #sp-component ul.archive-module {
    grid-template-columns: 1fr !important;
  }

  #sp-main-body #sp-component h1,
  #sp-main-body #sp-component h2,
  #sp-main-body #sp-component .page-header h1 {
    font-size: 30px !important;
  }
}