:root {
  --sp-blue: #0b63d8;
  --sp-blue-2: #1796f5;
  --sp-navy: #0b1a52;
  --sp-text: #28436d;
  --sp-muted: #6e80a1;
  --sp-border: #e8eef7;
  --sp-bg: #f7fbff;
  --sp-teal: #18c6c4;
  --sp-green: #39d4a9;
  --sp-purple: #8f70ff;
  --sidebar-w: 240px;
  --header-h: 86px;

  /* Superficies reutilizables para vistas, formularios y widgets */
  --sp-surface-1: rgba(255, 255, 255, .96);
  --sp-surface-2: #f7faff;
  --sp-surface-3: #f9fbfe;
  --sp-surface-hover: #fbfdff;
  --sp-text-strong: #061952;
  --sp-text-secondary: #3a5783;
  --sp-text-soft: #7590b4;
  --sp-input-bg: #ffffff;
  --sp-input-border: #dce6f1;
  --sp-table-border: #edf2f7;
}

* {
  box-sizing: border-box
}

html,
body {
  min-height: 100%;
}

body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--sp-navy);
  background:
    radial-gradient(circle at 74% 15%, rgba(60, 144, 255, .07), transparent 24%),
    linear-gradient(180deg, #fbfdff 0%, #f6fbff 100%);
  overflow-x: hidden;
}

.app-shell {
  min-height: 100vh;
}

.invisible {
  display: none !important;
}

.visible {
  display: flex !important;
}

/* Header */
.topbar {
  height: var(--header-h);
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--sp-border);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1030;
  display: flex;
  align-items: center;
  padding: 0 34px;
  box-shadow: 0 8px 25px rgba(47, 91, 154, .03);
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 250px;
  text-decoration: none;
}

.brand img {
  height: 50px;
  width: auto;
  max-width: 210px;
  object-fit: contain;
  display: block;
}

.brand-mark {
  width: 62px;
  height: 50px;
  display: block;
}

.brand-word {
  font-weight: 800;
  font-size: 34px;
  letter-spacing: -1.7px;
  line-height: 1;
  color: #0754a6;
}

.brand-word span {
  color: #11b7d9;
}

.search-wrap {
  max-width: 720px;
  flex: 1;
  margin-left: 4px;
  margin-right: 28px;
}

.search-box {
  height: 52px;
  border: 1px solid #e5ecf6;
  border-radius: 16px;
  background: #f7faff;
  display: flex;
  align-items: center;
  padding: 0 12px 0 16px;
  box-shadow: inset 0 1px 1px rgba(26, 72, 135, .02);
}

.search-box i {
  font-size: 22px;
  color: #425e8b;
}

.search-box input {
  border: 0;
  outline: 0;
  background: transparent;
  flex: 1;
  padding: 0 14px;
  color: #425e8b;
  font-size: 16px;
}

.search-box input::placeholder {
  color: #8090ad;
}

.shortcut {
  border: 1px solid #dfe7f3;
  border-radius: 10px;
  background: #fff;
  color: #5f7191;
  font-size: 14px;
  padding: 6px 10px;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(31, 69, 127, .04);
}

.top-actions {
  display: flex;
  align-items: center;
  gap: 14px;
}

.theme-switcher .theme-toggle {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  border: 1px solid var(--sp-border);
  background: #f5f9ff;
  color: #315d97;
  display: grid;
  place-items: center;
  padding: 0;
  box-shadow: none;
  transition: .18s ease;
}

.theme-switcher .theme-toggle:hover,
.theme-switcher .theme-toggle:focus {
  background: #eaf3ff;
  color: var(--sp-blue);
  border-color: #cfe1f8;
}

.theme-switcher .theme-toggle::after {
  display: none;
}

.theme-switcher .theme-toggle i {
  font-size: 19px;
  line-height: 1;
}

.theme-menu {
  min-width: 170px;
  padding: 8px;
  border-radius: 14px;
}

#module-menu-zone{
  min-height: 50vh !important;
}

.theme-menu .dropdown-item {
  border-radius: 9px;
  padding: 9px 10px;
  color: #435b80;
  display: flex;
  align-items: center;
  gap: 9px;
}

.theme-menu .dropdown-item i:first-child {
  width: 18px;
  text-align: center;
  color: #6683ad;
}

.theme-menu .dropdown-item.active,
.theme-menu .dropdown-item:active {
  background: #eaf4ff;
  color: #0b63d8;
}

.theme-menu .dropdown-item.active i {
  color: #0b63d8;
}

.notification-btn {
  width: 42px;
  height: 42px;
  border: 0;
  background: transparent;
  border-radius: 50%;
  display: grid;
  place-items: center;
  position: relative;
  color: #3e5d8e;
  font-size: 24px;
}

.notification-btn:hover {
  background: #f2f7ff;
}

.notif-badge {
  position: absolute;
  top: 2px;
  right: 3px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 999px;
  background: #ef3f47;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: grid;
  place-items: center;
  border: 2px solid #fff;
}

.user-separator {
  width: 1px;
  height: 38px;
  background: #dfe6f0;
}

.user-box {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

.avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #0d7add, #003b9f);
  color: #fff;
  font-weight: 700;
  font-size: 18px;
  box-shadow: 0 7px 16px rgba(7, 88, 185, .18);
}

.user-meta {
  line-height: 1.15;
  min-width: 125px;
}

.user-meta strong {
  display: block;
  color: #132858;
  font-size: 15px;
}

.user-meta small {
  color: #7790b3;
  font-size: 13px;
}

/* Sidebar */
/* =========================================================
   SIDEBAR
   ========================================================= */

.sidebar {

  position: fixed;

  top: var(--header-h);
  left: 0;

  width: var(--sidebar-w);

  height: calc(100vh - var(--header-h));
  height: calc(100dvh - var(--header-h));

  background: rgba(255, 255, 255, .96);

  border-right: 1px solid var(--sp-border);

  z-index: 1020;


  /* Layout vertical */
  display: flex;
  flex-direction: column;


  /*
   * Si el contenido supera la pantalla,
   * todo el sidebar hace scroll.
   */
  overflow-y: auto;
  overflow-x: hidden;


  -webkit-overflow-scrolling: touch;

  overscroll-behavior-y: contain;


  scrollbar-width: thin;

  scrollbar-color:
    rgba(11, 99, 216, .38) transparent;
}

.sidebar::-webkit-scrollbar {
  width: 7px;
}

.sidebar::-webkit-scrollbar-track {
  background: transparent;
}

.sidebar::-webkit-scrollbar-thumb {
  background: rgba(11, 99, 216, .38);
  border-radius: 999px;
}

.sidebar::-webkit-scrollbar-thumb:hover {
  background: rgba(11, 99, 216, .58);
}

/*
 * El menú NO debe encogerse para mantener visible el footer.
 * Si crece, empuja al footer hacia abajo y el sidebar completo hace scroll.
 */
/* =========================================================
   MENÚ
   ========================================================= */

.side-nav {

  min-width: 0;

  display: flex;
  flex-direction: column;

  gap: 7px;

  padding: 30px 0 18px;


  /*
   * CLAVE:
   *
   * 1 = crecer si sobra espacio
   * 0 = NO encogerse cuando tenga mucho contenido
   * auto = tamaño base según contenido
   *
   * Con poco contenido:
   * llena el espacio y manda el footer abajo.
   *
   * Con mucho contenido:
   * crece según sus opciones y empuja el footer.
   */
  flex: 1 0 auto;


  overflow: visible;
}

/* El <hr> no debe consumir margen vertical inesperado dentro del flex. */
.sidebar>hr {
  width: 100%;
  margin: 0;
  flex: 0 0 auto;
  border-color: var(--sp-border);
  opacity: 1;
}

/* Opción principal */
.side-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;

  width: calc(100% - 14px);
  min-height: 52px;
  padding: 14px 30px;
  margin-right: 14px;

  border: 0;
  border-radius: 0 14px 14px 0;
  background: transparent;

  text-decoration: none;
  text-align: left;
  color: #3f5579;
  font-family: inherit;
  font-size: 16px;
  line-height: 1.2;

  cursor: pointer;
  flex-shrink: 0;

  transition:
    background-color .2s ease,
    color .2s ease;
}

/* Solo el icono principal, para no afectar la flecha del submenú */
.side-link>i:first-child {
  font-size: 24px;
  width: 28px;
  min-width: 28px;
  text-align: center;
  color: #5673a2;
  transition: color .2s ease;
}

.side-link>span {
  min-width: 0;
}

.side-link:hover {
  background: #f5f9ff;
  color: var(--sp-blue);
}

.side-link:hover>i:first-child {
  color: var(--sp-blue);
}

.side-link.active {
  color: var(--sp-blue);
  background: linear-gradient(90deg,
      rgba(42, 145, 255, .10),
      rgba(42, 145, 255, .18));
  font-weight: 600;
}

.side-link.active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 5px;
  background: #157df0;
}

.side-link.active>i:first-child {
  color: #157df0;
}

/* Grupo con submenú */
.side-menu-group {
  width: 100%;
  flex-shrink: 0;
}

.side-menu-toggle {
  justify-content: flex-start;
}

.side-menu-toggle>span {
  flex: 1;
}

.submenu-arrow {
  width: auto !important;
  min-width: auto !important;
  margin-left: auto;
  font-size: 14px !important;
  color: #8798b5 !important;
  transition: transform .25s ease, color .2s ease;
}

.side-menu-toggle[aria-expanded="true"] {
  background: #f5f9ff;
  color: var(--sp-blue);
}

.side-menu-toggle[aria-expanded="true"]>i:first-child,
.side-menu-toggle[aria-expanded="true"] .submenu-arrow {
  color: var(--sp-blue) !important;
}

.side-menu-toggle[aria-expanded="true"] .submenu-arrow {
  transform: rotate(180deg);
}

/* Submenú */
.side-submenu {
  position: relative;
  margin: 3px 14px 8px 27px;
  padding: 4px 0 4px 18px;
}

.side-submenu::before {
  content: "";
  position: absolute;
  left: 13px;
  top: 4px;
  bottom: 4px;
  width: 1px;
  background: #dce6f4;
}

.side-sublink {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;

  min-height: 42px;
  padding: 9px 14px 9px 24px;

  color: #617493;
  font-size: 14px;
  line-height: 1.2;
  text-decoration: none;
  border-radius: 10px;

  transition:
    background-color .2s ease,
    color .2s ease;
}

.side-sublink i {
  width: 20px;
  min-width: 20px;
  font-size: 16px;
  text-align: center;
  color: #7890b5;
  transition: color .2s ease;
}

.side-sublink:hover {
  color: var(--sp-blue);
  background: rgba(23, 125, 240, .07);
}

.side-sublink:hover i {
  color: var(--sp-blue);
}

.side-sublink.active {
  color: var(--sp-blue);
  background: rgba(23, 125, 240, .09);
  font-weight: 600;
}

.side-sublink.active i {
  color: var(--sp-blue);
}

/* Footer fijo al fondo del sidebar.
   Se soportan ambos nombres por si usas .side-footer o .site-footer. */
/* =========================================================
   FOOTER SIDEBAR
   ========================================================= */

.side-footer,
.site-footer {

  display: block !important;

  width: 100%;

  min-width: 0;


  /*
   * Ya NO necesitamos margin-top:auto.
   *
   * side-nav se encarga de ocupar
   * el espacio disponible.
   */
  margin: 0;


  /*
   * El footer nunca se comprime.
   */
  flex: 0 0 auto;


  padding: 18px 34px 24px;

  color: #7f92b4;

  background: rgba(255, 255, 255, .98);

  border-top: 1px solid var(--sp-border);

  font-size: 13px;

  line-height: 1.55;

  position: relative;

  overflow: hidden;

  z-index: 2;
}

.side-footer::before,
.site-footer::before {
  content: "";
  position: absolute;
  left: -28px;
  bottom: -84px;
  width: 210px;
  height: 160px;
  background: linear-gradient(135deg,
      rgba(39, 142, 252, .18),
      rgba(39, 142, 252, 0));
  border-radius: 55% 45% 0 0 / 50% 50% 0 0;
  transform: rotate(-12deg);
  z-index: -1;
}

.side-footer strong,
.site-footer strong {
  display: block;
  color: #536b92;
  margin-bottom: 3px;
}

.contenidos::before {
  content: "";
  position: absolute;
  inset: 0;

  background: url("../images/back.png") center center / cover no-repeat fixed;

  opacity: 0.25;

  z-index: 0;
  pointer-events: none;
}

/* Main */
main {
  width: 100%;
  margin: 0 !important;
  padding: 0 !important;
  min-height: 100vh;
  position: relative;
}

.menumargin {
  padding-left: calc(var(--sidebar-w)) !important;

}

.content-wrap {
  width: 100%;
  position: relative;
  z-index: 1;
  margin: 0 auto;
}

.eyebrow {
  font-size: 24px;
  color: #63769b;
  margin: 0 0 2px;
}

h1,
.h1 {
  font-size: 48px;
  font-weight: 800;
  letter-spacing: -1.6px;
  margin: 0;
  color: #081b54;
  line-height: 1.08;
}

.subheading {
  font-size: 24px;
  color: #283e69;
  margin-top: 3px;
}

.quote-panel {
  color: #4b6591;
  font-style: italic;
  font-size: 18px;
  line-height: 1.35;
  padding-top: 26px;
  padding-left: 16px;
}

.quote-panel::after {
  content: "";
  display: block;
  width: 48px;
  height: 5px;
  border-radius: 99px;
  background: #1481f5;
  margin-top: 14px;
}

.slogan {
  font-size: 17px;
  line-height: 1.2;
  text-align: right;
  color: #4d6999;
  padding-top: 50px;
}

.slogan strong {
  color: #0077d7;
}

.modules-grid {
  margin-top: 36px;
}

.module-card {
  height: 224px;
  border: 1px solid #edf2f8;
  border-radius: 16px;
  background: rgba(255, 255, 255, .94);
  padding: 20px 24px 17px;
  position: relative;
  box-shadow: 0 10px 24px rgba(57, 94, 146, .08);
  overflow: hidden;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.module-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 34px rgba(57, 94, 146, .14);
  border-color: #dce8f7;
}

.module-card::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 5px;
  background: var(--accent, #2ca4ff);
}

.module-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.module-icon {
  width: 84px;
  height: 84px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: var(--icon-bg, linear-gradient(135deg, #dceeff, #cfe5ff));
  color: var(--icon-color, #146fe3);
  font-size: 43px;
}

.module-arrow {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #f2f6fb;
  color: #0d54b9;
  display: grid;
  place-items: center;
  font-size: 24px;
  transition: .18s ease;
}

.module-card:hover .module-arrow {
  background: #e7f1ff;
  transform: translateX(2px);
}

.module-title {
  font-size: 22px;
  font-weight: 800;
  margin: 12px 0 4px;
  color: #0b1b52;
}

.module-desc {
  font-size: 16px;
  line-height: 1.35;
  color: #6a7b9c;
  margin: 0;
  max-width: 92%;
}

.accent-blue {
  --accent: #38a6ff;
  --icon-bg: linear-gradient(135deg, #d9ecff, #d3e6ff);
  --icon-color: #1676e5;
}

.accent-green {
  --accent: #38d1aa;
  --icon-bg: linear-gradient(135deg, #d4f7f0, #bff0e7);
  --icon-color: #0e9992;
}

.accent-cyan {
  --accent: #20cdd1;
  --icon-bg: linear-gradient(135deg, #d6f8fb, #c7f3f5);
  --icon-color: #09a6c1;
}

.accent-indigo {
  --accent: #5b84ff;
  --icon-bg: linear-gradient(135deg, #dde9ff, #d7e3ff);
  --icon-color: #2f62d8;
}

.accent-purple {
  --accent: #8c6ff7;
  --icon-bg: linear-gradient(135deg, #e8e0ff, #ded2ff);
  --icon-color: #5b47d6;
}

.bottom-panel {
  background: rgba(255, 255, 255, .96);
  border: 1px solid #edf2f8;
  border-radius: 16px;
  box-shadow: 0 10px 24px rgba(57, 94, 146, .07);
  padding: 18px 22px;
  min-height: 146px;
}

.panel-title {
  display: flex;
  align-items: center;
  gap: 11px;
  color: #142451;
  font-weight: 700;
  font-size: 16px;
}

.panel-title i {
  font-size: 23px;
  color: #4f6791;
}

.panel-action {
  font-size: 12px;
  text-decoration: none;
  color: #0873dc;
}

.quick-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: 19px;
}

.quick-btn {
  height: 58px;
  border: 1px solid #dbe5f3;
  border-radius: 12px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: #24426f;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  transition: .18s ease;
}

.quick-btn:hover {
  background: #f6faff;
  border-color: #c9dbf3;
  transform: translateY(-1px);
}

.quick-btn i {
  font-size: 25px;
  color: #1684ef;
}

.recent-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 28px;
  margin-top: 13px;
}

.recent-item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.recent-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #e4f2ff, #d7e9ff);
  color: #0f78e2;
  font-size: 21px;
  flex: 0 0 auto;
}

.recent-icon.green {
  background: linear-gradient(135deg, #d9f6ef, #c8eee6);
  color: #149383;
}

.recent-icon.cyan {
  background: linear-gradient(135deg, #dcf8fa, #c6f2f6);
  color: #0fa9bf;
}

.recent-text {
  font-size: 12px;
  line-height: 1.2;
  color: #8191ad;
}

.recent-text strong {
  display: block;
  color: #314b74;
  font-size: 13px;
  margin-bottom: 2px;
}

.mobile-menu-btn {
  display: none;
}


/* =========================================================
   COMPONENTES REUTILIZABLES: CATÁLOGOS, FORMULARIOS Y WIDGETS
   ========================================================= */

.card-shell {
  background: var(--sp-surface-1);
  border: 1px solid var(--sp-border);
  border-radius: 16px;
  box-shadow: 0 10px 28px rgba(57, 94, 146, .08);
}

.icon-tile {
  width: 54px;
  height: 54px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  font-size: 27px;
  background: linear-gradient(135deg, #e1efff, #d4e7ff);
  color: #1375e5;
  flex: 0 0 auto;
}

.icon-tile.green {
  background: linear-gradient(135deg, #d6f7f0, #c5f1e8);
  color: #079b8d;
}

.icon-tile.purple {
  background: linear-gradient(135deg, #eee5ff, #e2d5ff);
  color: #7548e9;
}

.icon-tile.red {
  background: linear-gradient(135deg, #ffe7ec, #ffd7df);
  color: #ef3f63;
}

.metric-card {
  padding: 16px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 112px;
}

.metric-label {
  font-size: 14px;
  color: var(--sp-text-secondary);
}

.metric-value {
  font-size: 29px;
  font-weight: 800;
  color: var(--sp-text-strong);
  line-height: 1;
}

.metric-delta {
  font-size: 12px;
  margin-top: 7px;
  color: #11a97d;
}

.metric-delta.down {
  color: #ed4561;
}

.metric-vs {
  font-size: 11px;
  color: var(--sp-muted);
}

.section-title {
  font-size: 21px;
  font-weight: 800;
  color: var(--sp-navy);
  margin: 0;
}

.btn-soft {
  border: 1px solid var(--sp-input-border);
  background: var(--sp-input-bg);
  color: var(--sp-text);
  border-radius: 10px;
  height: 42px;
  padding: 0 15px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  transition: .18s ease;
}

.btn-soft:hover {
  background: var(--sp-surface-2);
  border-color: #c9dbf3;
  color: var(--sp-blue);
}

.btn-primary-soft {
  border: 0;
  background: linear-gradient(135deg, #1486ff, #0667dc);
  color: #fff;
  border-radius: 10px;
  height: 42px;
  padding: 0 18px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  box-shadow: 0 8px 18px rgba(11, 99, 216, .18);
  transition: .18s ease;
}

.btn-primary-soft:hover {
  color: #fff;
  filter: brightness(1.06);
}

.form-control,
.form-select {
  background-color: var(--sp-input-bg);
  border-color: var(--sp-input-border);
  border-radius: 9px;
  min-height: 40px;
  color: var(--sp-text);
  font-size: 14px;
}

.form-control::placeholder {
  color: var(--sp-muted);
  opacity: 1;
}

.form-control:focus,
.form-select:focus {
  background-color: var(--sp-input-bg);
  border-color: #94c4fa;
  color: var(--sp-text);
  box-shadow: 0 0 0 .2rem rgba(13, 110, 253, .08);
}

.form-label {
  font-weight: 600;
  color: var(--sp-navy);
  font-size: 13px;
  margin-bottom: 6px;
}

.input-group-text {
  background: var(--sp-surface-3);
  border-color: var(--sp-input-border);
  color: #5375a6;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
}

.status-pill::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.status-active {
  background: #e8fbf5;
  color: #119174;
}

.status-active::before {
  background: #16c79a;
}

.status-prospect {
  background: #fff7df;
  color: #bd7a00;
}

.status-prospect::before {
  background: #ffad0b;
}

.status-inactive {
  background: #ffecef;
  color: #d83a57;
}

.status-inactive::before {
  background: #ff4567;
}

.table-clean {
  margin: 0;
  --bs-table-bg: transparent;
  --bs-table-color: var(--sp-text);
  --bs-table-border-color: var(--sp-table-border);
}

.table-clean thead th {
  background: var(--sp-surface-2);
  border-bottom: 1px solid var(--sp-input-border);
  color: #416084;
  font-size: 12px;
  font-weight: 600;
  padding: 12px 10px;
  white-space: nowrap;
}

.table-clean tbody td {
  background: transparent;
  font-size: 12px;
  color: var(--sp-text);
  padding: 10px;
  border-color: var(--sp-table-border);
  vertical-align: middle;
  white-space: nowrap;
}

.table-clean tbody tr:hover td {
  background: var(--sp-surface-hover);
}

.action-icon {
  border: 0;
  background: transparent;
  color: #0f5db6;
  font-size: 16px;
  padding: 2px 6px;
}

.action-icon.edit {
  color: #007bff;
}

.filter-panel {
  padding: 16px;
}

.filter-panel .form-label {
  font-size: 12px;
}

.tip-card {
  padding: 16px;
  position: relative;
  overflow: hidden;
}

.tip-card::after {
  content: '';
  position: absolute;
  right: -35px;
  bottom: -45px;
  width: 120px;
  height: 90px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(59, 159, 255, .15), transparent 70%);
  pointer-events: none;
}

.pagination .page-link {
  background: var(--sp-input-bg);
  border-color: var(--sp-input-border);
  color: #315b91;
  margin: 0 2px;
  border-radius: 8px;
}

.pagination .page-item.active .page-link {
  background: #0b74e8;
  border-color: #0b74e8;
  color: #fff;
}

.catalog-toolbar {
  padding: 16px 18px;
  border-bottom: 1px solid var(--sp-table-border);
}

.catalog-body {
  overflow-x: auto;
}

.catalog-footer {
  padding: 16px 18px;
  border-top: 1px solid var(--sp-table-border);
}

.stats-row {
  margin-top: 22px;
}

.catalog-grid {
  margin-top: 16px;
}

.filter-sticky {
  position: sticky;
  top: calc(var(--header-h) + 16px);
}

.form-card {
  padding: 18px;
}

.form-card-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}

.form-actions {
  border-top: 1px solid var(--sp-table-border);
  margin-top: 18px;
  padding-top: 18px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.summary-card {
  padding: 18px;
}

.summary-hero {
  text-align: center;
  padding: 10px 0 18px;
  border-bottom: 1px solid var(--sp-table-border);
}

.summary-avatar {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  margin: 0 auto 12px;
  background: radial-gradient(circle at 50% 45%, #f7fbff, #e0efff);
  color: #1479eb;
  font-size: 52px;
}

.summary-list {
  display: flex;
  flex-direction: column;
  gap: 17px;
  padding-top: 18px;
}

.summary-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.summary-item .mini-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: #e8f3ff;
  color: #1380ee;
  display: grid;
  place-items: center;
  font-size: 18px;
  flex: 0 0 auto;
}

.summary-item strong {
  display: block;
  color: var(--sp-navy);
  font-size: 13px;
}

.summary-item span {
  display: block;
  color: var(--sp-text-soft);
  font-size: 13px;
}

.switch-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}

.switch {
  width: 55px;
  height: 31px;
  border-radius: 999px;
  background: #1cc79c;
  position: relative;
}

.switch::after {
  content: '';
  position: absolute;
  width: 25px;
  height: 25px;
  right: 3px;
  top: 3px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .18);
}

/* Tema oscuro: conserva la identidad azul/cian de SoftPech */
[data-bs-theme="dark"] {
  --sp-navy: #eaf3ff;
  --sp-text: #cbd8eb;
  --sp-muted: #94a7c5;
  --sp-border: #243650;
  --sp-bg: #0b1422;

  --sp-surface-1: rgba(17, 31, 51, .96);
  --sp-surface-2: #15263c;
  --sp-surface-3: #172940;
  --sp-surface-hover: #162a43;
  --sp-text-strong: #edf5ff;
  --sp-text-secondary: #a5b7cf;
  --sp-text-soft: #91a6c3;
  --sp-input-bg: #13243a;
  --sp-input-border: #29415f;
  --sp-table-border: #243852;
}

[data-bs-theme="dark"] body {
  color: var(--sp-navy);
  background:
    radial-gradient(circle at 74% 15%, rgba(25, 150, 245, .10), transparent 25%),
    linear-gradient(180deg, #0c1625 0%, #101b2c 100%);
}

[data-bs-theme="dark"] .topbar {
  background: rgba(12, 22, 37, .95);
  border-bottom-color: var(--sp-border);
  box-shadow: 0 8px 25px rgba(0, 0, 0, .18);
}

[data-bs-theme="dark"] .sidebar {
  background: rgba(13, 24, 40, .94);
  border-right-color: var(--sp-border);
}

[data-bs-theme="dark"] .side-link {
  color: #b1c0d6;
}

[data-bs-theme="dark"] .side-link i {
  color: #8ea7ca;
}

[data-bs-theme="dark"] .side-link:hover {
  background: #162942;
  color: #68b5ff;
}

[data-bs-theme="dark"] .side-link.active {
  color: #72bbff;
  background: linear-gradient(90deg, rgba(23, 125, 240, .20), rgba(23, 125, 240, .10));
}

[data-bs-theme="dark"] .side-link:hover>i:first-child,
[data-bs-theme="dark"] .side-link.active>i:first-child {
  color: #72bbff;
}

[data-bs-theme="dark"] .side-menu-toggle[aria-expanded="true"] {
  background: #162942;
  color: #72bbff;
}

[data-bs-theme="dark"] .side-menu-toggle[aria-expanded="true"]>i:first-child,
[data-bs-theme="dark"] .side-menu-toggle[aria-expanded="true"] .submenu-arrow {
  color: #72bbff !important;
}

[data-bs-theme="dark"] .submenu-arrow {
  color: #8ea7ca !important;
}

[data-bs-theme="dark"] .side-submenu::before {
  background: #2a405e;
}

[data-bs-theme="dark"] .side-sublink {
  color: #9eb0ca;
}

[data-bs-theme="dark"] .side-sublink i {
  color: #8099bc;
}

[data-bs-theme="dark"] .side-sublink:hover,
[data-bs-theme="dark"] .side-sublink.active {
  color: #72bbff;
  background: rgba(23, 125, 240, .14);
}

[data-bs-theme="dark"] .side-sublink:hover i,
[data-bs-theme="dark"] .side-sublink.active i {
  color: #72bbff;
}

[data-bs-theme="dark"] .side-footer,
[data-bs-theme="dark"] .site-footer {
  background: rgba(13, 24, 40, .98);
  border-top-color: var(--sp-border);
}

[data-bs-theme="dark"] .side-footer,
[data-bs-theme="dark"] .side-footer strong,
[data-bs-theme="dark"] .site-footer,
[data-bs-theme="dark"] .site-footer strong {
  color: #8fa5c4;
}

[data-bs-theme="dark"] h1,
[data-bs-theme="dark"] .module-title {
  color: #edf5ff;
}

[data-bs-theme="dark"] .eyebrow,
[data-bs-theme="dark"] .subheading,
[data-bs-theme="dark"] .quote-panel,
[data-bs-theme="dark"] .slogan {
  color: #a8bad4;
}

[data-bs-theme="dark"] .module-card,
[data-bs-theme="dark"] .bottom-panel {
  background: rgba(17, 31, 51, .96);
  border-color: #263a57;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .18);
}

[data-bs-theme="dark"] .module-card:hover {
  border-color: #365274;
  box-shadow: 0 16px 34px rgba(0, 0, 0, .26);
}

[data-bs-theme="dark"] .module-desc {
  color: #9dafc8;
}

[data-bs-theme="dark"] .module-arrow {
  background: #172c48;
  color: #71baff;
}

[data-bs-theme="dark"] .module-card:hover .module-arrow {
  background: #1d385a;
}

[data-bs-theme="dark"] .panel-title {
  color: #e7f1ff;
}

[data-bs-theme="dark"] .panel-title i {
  color: #91add1;
}

[data-bs-theme="dark"] .quick-btn {
  background: #13243a;
  border-color: #29415f;
  color: #c9d8ec;
}

[data-bs-theme="dark"] .quick-btn:hover {
  background: #182d47;
  border-color: #36597d;
}

[data-bs-theme="dark"] .recent-text {
  color: #8fa3bf;
}

[data-bs-theme="dark"] .recent-text strong {
  color: #cbd9ec;
}

[data-bs-theme="dark"] .user-meta strong {
  color: #e7f1ff;
}

[data-bs-theme="dark"] .user-meta small {
  color: #91a5c2;
}

[data-bs-theme="dark"] .user-separator {
  background: #2a3c57;
}

[data-bs-theme="dark"] .notification-btn {
  color: #a9bedb;
}

[data-bs-theme="dark"] .notification-btn:hover {
  background: #162a43;
}

[data-bs-theme="dark"] .notif-badge {
  border-color: #0c1625;
}

[data-bs-theme="dark"] .theme-switcher .theme-toggle {
  background: #14263d;
  color: #9ec8f8;
  border-color: #29405e;
}

[data-bs-theme="dark"] .theme-switcher .theme-toggle:hover,
[data-bs-theme="dark"] .theme-switcher .theme-toggle:focus {
  background: #1b324f;
  color: #74bdff;
  border-color: #365879;
}

[data-bs-theme="dark"] .theme-menu {
  background: #122238;
  border: 1px solid #2a405e;
}

[data-bs-theme="dark"] .theme-menu .dropdown-item {
  color: #c4d2e5;
}

[data-bs-theme="dark"] .theme-menu .dropdown-item i:first-child {
  color: #90a8c8;
}

[data-bs-theme="dark"] .theme-menu .dropdown-item:hover {
  background: #1a304c;
}

[data-bs-theme="dark"] .theme-menu .dropdown-item.active {
  background: #193a60;
  color: #79c0ff;
}

[data-bs-theme="dark"] .dropdown-menu {
  --bs-dropdown-bg: #122238;
  --bs-dropdown-link-color: #c4d2e5;
  --bs-dropdown-link-hover-bg: #1a304c;
  --bs-dropdown-link-hover-color: #fff;
  --bs-dropdown-border-color: #2a405e;
}


/* =========================================================
   TEMA OSCURO PARA CATÁLOGOS, FORMULARIOS Y WIDGETS
   ========================================================= */
[data-bs-theme="dark"] .card-shell {
  background: var(--sp-surface-1);
  border-color: var(--sp-border);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .22);
}

[data-bs-theme="dark"] .icon-tile {
  background: linear-gradient(135deg, #163658, #17304e);
  color: #6eb8ff;
}

[data-bs-theme="dark"] .icon-tile.green {
  background: linear-gradient(135deg, #123b39, #153631);
  color: #4bd6bd;
}

[data-bs-theme="dark"] .icon-tile.purple {
  background: linear-gradient(135deg, #33294f, #292541);
  color: #b09aff;
}

[data-bs-theme="dark"] .icon-tile.red {
  background: linear-gradient(135deg, #482638, #392333);
  color: #ff7891;
}

[data-bs-theme="dark"] .metric-delta {
  color: #4bd6aa;
}

[data-bs-theme="dark"] .metric-delta.down {
  color: #ff7289;
}

[data-bs-theme="dark"] .btn-soft:hover {
  background: #182d47;
  border-color: #36597d;
  color: #fff;
}

[data-bs-theme="dark"] .btn-primary-soft {
  box-shadow: 0 8px 18px rgba(0, 106, 255, .20);
}

[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus {
  background-color: #152840;
  border-color: #4a83ba;
  color: #fff;
  box-shadow: 0 0 0 .2rem rgba(37, 132, 230, .14);
}

[data-bs-theme="dark"] .form-select option {
  background: #13243a;
  color: #d6e3f3;
}

[data-bs-theme="dark"] .input-group-text {
  color: #8eb5e5;
}

[data-bs-theme="dark"] .status-active {
  background: rgba(22, 199, 154, .14);
  color: #55d8b8;
}

[data-bs-theme="dark"] .status-active::before {
  background: #25d1a6;
}

[data-bs-theme="dark"] .status-prospect {
  background: rgba(255, 173, 11, .13);
  color: #ffc451;
}

[data-bs-theme="dark"] .status-prospect::before {
  background: #ffb927;
}

[data-bs-theme="dark"] .status-inactive {
  background: rgba(255, 69, 103, .14);
  color: #ff8298;
}

[data-bs-theme="dark"] .status-inactive::before {
  background: #ff5574;
}

[data-bs-theme="dark"] .table-clean {
  --bs-table-bg: transparent;
  --bs-table-color: #b9cae0;
  --bs-table-border-color: var(--sp-table-border);
}

[data-bs-theme="dark"] .table-clean thead th {
  background: var(--sp-surface-2);
  border-bottom-color: #2b405d;
  color: #9eb4d0;
}

[data-bs-theme="dark"] .table-clean tbody td {
  background: transparent;
  color: #b9cae0;
  border-color: var(--sp-table-border);
}

[data-bs-theme="dark"] .table-clean tbody tr:hover td {
  background: var(--sp-surface-hover);
  color: #e2ecf8;
}

[data-bs-theme="dark"] .action-icon {
  color: #73b9ff;
}

[data-bs-theme="dark"] .action-icon.edit {
  color: #42a3ff;
}

[data-bs-theme="dark"] .action-icon:hover {
  color: #fff;
}

[data-bs-theme="dark"] .tip-card::after {
  background: radial-gradient(circle, rgba(59, 159, 255, .12), transparent 70%);
}

[data-bs-theme="dark"] .pagination {
  --bs-pagination-bg: #13243a;
  --bs-pagination-border-color: #29415f;
  --bs-pagination-color: #9fc8f5;
  --bs-pagination-hover-bg: #1b324f;
  --bs-pagination-hover-border-color: #36597d;
  --bs-pagination-hover-color: #fff;
  --bs-pagination-disabled-bg: #101d30;
  --bs-pagination-disabled-border-color: #243852;
  --bs-pagination-disabled-color: #667d9b;
}

[data-bs-theme="dark"] .pagination .page-link {
  background: #13243a;
  border-color: #29415f;
  color: #9fc8f5;
}

[data-bs-theme="dark"] .pagination .page-link:hover {
  background: #1b324f;
  border-color: #36597d;
  color: #fff;
}

[data-bs-theme="dark"] .pagination .page-item.active .page-link {
  background: #0b74e8;
  border-color: #2489ef;
  color: #fff;
}

[data-bs-theme="dark"] .summary-avatar {
  background: radial-gradient(circle at 50% 45%, #18395c, #142a45);
  color: #6ab6ff;
}

[data-bs-theme="dark"] .summary-item .mini-icon {
  background: #17324f;
  color: #68b5ff;
}

[data-bs-theme="dark"] .switch {
  background: #19b991;
}

[data-bs-theme="dark"] .switch::after {
  background: #f5f8fc;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .35);
}

[data-bs-theme="dark"] .text-secondary {
  color: #91a5c2 !important;
}

[data-bs-theme="dark"] .btn-light {
  --bs-btn-bg: #13243a;
  --bs-btn-border-color: #29415f;
  --bs-btn-color: #cbd9ec;
  --bs-btn-hover-bg: #182d47;
  --bs-btn-hover-border-color: #36597d;
  --bs-btn-hover-color: #fff;
}

[data-bs-theme="dark"] .btn-outline-primary {
  --bs-btn-color: #70b9ff;
  --bs-btn-border-color: #3875ad;
  --bs-btn-hover-bg: #126dcc;
  --bs-btn-hover-border-color: #126dcc;
  --bs-btn-hover-color: #fff;
}

.module-button {
  width: 100%;

  font-family: inherit;

  text-align: left;

  cursor: pointer;

  appearance: none;

  -webkit-appearance: none;
}


/*
 * Ahora estos elementos son span,
 * así que los convertimos en bloques.
 */
.module-button .module-head {
  display: flex;
}

.module-button .module-title,
.module-button .module-desc {
  display: block;
}


/* Accesibilidad con teclado */
.module-button:focus {
  outline: none;
}

.module-button:focus-visible {
  outline: 3px solid rgba(20, 129, 245, .30);
  outline-offset: 3px;
}

@media (max-width: 1199.98px) {
  :root {
    --sidebar-w: 200px;
  }

  .brand {
    min-width: 205px;
  }

  .brand img {
    max-width: 180px;
    height: 46px;
  }

  .brand-word {
    font-size: 29px;
  }

  .search-wrap {
    max-width: none;
  }

  h1 {
    font-size: 40px;
  }

  .module-card {
    height: 214px;
  }

  .quick-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 991.98px) {
  :root {
    --header-h: 74px;
  }

  .topbar {
    padding: 0 18px;
  }

  .brand {
    min-width: auto;
  }

  .brand img {
    height: 42px;
    max-width: 170px;
  }

  .brand-mark {
    width: 50px;
    height: 40px;
  }

  .brand-word {
    font-size: 27px;
  }

  .search-wrap {
    margin: 0 12px;
  }

  .shortcut {
    display: none;
  }

  .user-meta,
  .user-separator {
    display: none;
  }

  /*
   * En pantallas menores a 992px el sidebar de escritorio se oculta.
   * Si quieres mostrarlo incluso aquí, elimina esta regla.
   */
  .sidebar {
    display: none;
  }

  .sidebar.visible {
    display: flex !important;
  }

  main {
    margin-left: 0 !important;
    padding: calc(var(--header-h) + 28px) 18px 28px !important;
  }

  .mobile-menu-btn {
    display: grid;
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 12px;
    background: #f4f8ff;
    color: #215fbd;
    place-items: center;
    font-size: 24px;
    margin-right: 10px;
  }

  .slogan {
    display: none;
  }

  .quote-panel {
    padding-left: 0;
  }
}

@media (max-width: 767.98px) {
  .search-wrap {
    display: none;
  }

  .topbar {
    justify-content: space-between;
  }

  .top-actions {
    gap: 8px;
  }

  .theme-switcher .theme-toggle,
  .notification-btn {
    width: 40px;
    height: 40px;
  }

  .eyebrow {
    font-size: 19px;
  }

  h1 {
    font-size: 35px;
  }

  .subheading {
    font-size: 19px;
  }

  .quote-panel {
    font-size: 16px;
    padding-top: 16px;
  }

  .modules-grid {
    margin-top: 24px;
  }

  .module-card {
    height: auto;
    min-height: 205px;
  }

  .bottom-panel {
    min-height: auto;
  }

  .quick-row {
    grid-template-columns: 1fr;
  }

  .recent-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 575.98px) {
  .brand-word {
    display: none;
  }

  .brand img {
    height: 38px;
    max-width: 145px;
  }

  .brand-mark {
    width: 46px;
    height: 38px;
  }

  .topbar {
    padding: 0 12px;
  }

  main {
    padding-left: 12px;
    padding-right: 12px;
  }

  h1 {
    font-size: 31px;
  }

  .module-icon {
    width: 72px;
    height: 72px;
    font-size: 37px;
  }

  .module-title {
    font-size: 20px;
  }

  .module-desc {
    font-size: 15px;
  }
}