/* ===== UI Styles ===================================================== */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

/* ---------- 1. Color Palette (CSS Variables) --------------------------------------- */
:root[data-bs-theme="light"] {
  --bg: #f4f5f7;
  --bg-soft: #e6e8ec;
  --card: #fcfcfd;
  --primary: #13b77a;
  --danger: #d75c5a;
  --text: #1f1f1f;
}

:root[data-bs-theme="dark"] {
  --bg: #0d1117;
  --bg-soft: #161b22;
  --card: #1e242c;
  --primary: #16c784;
  --danger: #ff6a6a;
  --text: #c9d1d9;
}

/* ---------- 2. Base Styles ------------------------------------------------------ */
body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: .95rem;
}

/* Logo */
.logo-svg-central {
  max-height: 350px;
  width: auto;
  display: block;
  margin: 0 auto;
}

.logo-svg-sidemenu {
  max-height: 150px;
  width: 100%;
  display: block;
  margin: 0 auto;
}

[data-bs-theme="light"] .logo-svg {
  color: #000;
}

[data-bs-theme="dark"] .logo-svg {
  color: #fff;
}

/* Mobile Logo */

.logo-svg-sidemenu-mobile {
  max-height: 50px;
  width: auto;
  max-width: 100px;
  display: block;
  margin: 0 auto;
}

[data-bs-theme="light"] .logo-svg-mobile {
  color: #000;
}

[data-bs-theme="dark"] .logo-svg-mobile {
  color: #fff;
}



/* Buttons */
.btn-primary {
  background: var(--cult-primary);
  border-color: var(--cult-primary)
}

.btn-primary:hover {
  background: #18d28c;
  border-color: #18d28c
}

.btn-outline-danger {
  color: var(--cult-danger);
  border-color: var(--cult-danger)
}

.btn-outline-danger:hover {
  background: var(--cult-danger);
  color: #fff
}

/* Theme toggle button */
.theme-toggle-btn {
  background: none;
  border: none;
  font-size: 1rem;
  color: inherit;
}

.theme-icon {
  transition: color .2s
}

[data-bs-theme="light"] .theme-icon {
  color: var(--cult-text)
}

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


/* Mobile */
@media(max-width: 767.98px) {
  .content {
    margin-left: 0 !important;
    width: 100% !important;
  }
}



/* Logo animation effect */
/* Animated stroke effect in SVG */
/* Animates the strokes drawing like a lightning */

/* === Stroke animation (lightning) for specific paths === */
/* === Infinite stroke animation (lightning) for paths with logo-stroke class === */
.logo-stroke {
  stroke: currentColor;
  stroke-width: 5;
  /* antes: 3.5 */
  fill: none;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation:
    logo-draw-loop 4s ease-in-out infinite,
    logo-glow 0.5s ease-in-out infinite alternate;
  filter: drop-shadow(0 0 1px currentColor);
}


/* Dibujo del trazo en loop */
@keyframes logo-draw-loop {
  0% {
    stroke-dashoffset: 1000;
    opacity: 0.1;
  }

  50% {
    stroke-dashoffset: 0;
    opacity: 1;
  }

  100% {
    stroke-dashoffset: 1000;
    opacity: 0.1;
  }
}

@keyframes logo-glow {
  from {
    filter: drop-shadow(0 0 3px currentColor) drop-shadow(0 0 6px currentColor);
  }

  to {
    filter: drop-shadow(0 0 6px currentColor) drop-shadow(0 0 12px currentColor);
  }
}

/*Glow a todo el logo*/
.logo-svg {
  filter: drop-shadow(0 0 6px var(--primary));
}

.logo-svg-mobile {
  filter: drop-shadow(0 0 6px var(--cult-primary));
}


/* Color dinámico según tema */
[data-bs-theme="light"] .logo-stroke {
  stroke: #000;
}

[data-bs-theme="dark"] .logo-stroke {
  stroke: #fff;
}

@media (max-width: 768px) {

  /* Reducir ligeramente el alto del logo si ocupa mucho */
  .logo-svg-sidemenu-mobile {
    max-height: 80px;
    max-width: 90%;
  }

  /* Espaciado interno general del cuerpo del menú */
  .offcanvas-body {
    padding: 1rem 0.75rem !important;
  }
}


.btn-outline-info:hover {
  background-color: #0dcaf0;
  color: white;
  border-color: #0dcaf0;
}



/* Botón outline-primary que invierte colores al hover */
.btn-outline-primary {
  border-width: 2px;
}

.btn-outline-primary:hover {
  background-color: #0d6efd;
  color: white;
  border-color: #0d6efd;
}



@media (max-width: 576px) {
  .card-control {
    min-height: 150px;
    padding: 0.75rem;
  }
}