:root {
  /* --- Fondos y Superficies (Glassmorphism) --- */
  --background-gradient: radial-gradient(ellipse 80% 80% at top right, hsl(18, 26%, 7%), hsl(0, 41%, 10%), hsl(340deg 97.45% 2.07%), hsl(0deg 2.88% 1.67%));
  --surface-color: rgb(18 18 18 / 40%);
  --surface-border: rgba(255, 255, 255, 0.1);
  --text-primary: rgba(255, 255, 255, 0.95);
  --text-secondary: rgba(255, 255, 255, 0.65);
  
  /* --- Acentos de Marca --- */
  --accent-primary: #ff2f00;
  --accent-primary-hover: #FB6340;
  --accent-secondary: #F92C85;
  --accent-brand: #E53935;
  
  --accent-glow: 0 0 15px rgba(240, 125, 48, 0.6);
  --accent-secondary-glow: 0 0 25px rgba(249, 44, 133, 0.5);
  --shadow-color: rgba(0, 0, 0, 0.3);

  --navbar-height: 64px;             /* Altura del Navbar Fijo Superior */
  --sidebar-rail-width: 250px;        /* Ancho del Sidebar General (Iconos, Oculto por defecto) */
  --sidebar-context-width: 260px;    /* Ancho del Sidebar de Contexto (Siempre visible en Desktop) */

  --neon-color-1: #52A4FF;     --neon-color-1-rgb: 82, 164, 255;
  --neon-color-2: #F8E000;     --neon-color-2-rgb: 248, 224, 0;
  --neon-color-3: #30f0c0;     --neon-color-3-rgb: 48, 240, 192;
  --neon-color-4: #BA55C7;     --neon-color-4-rgb: 186, 85, 199;
  --neon-color-5: #F3407C;     --neon-color-5-rgb: 243, 64, 124;
  --neon-color-6: #A5093D;     --neon-color-6-rgb: 165, 9, 61;
  --neon-color-7: #6A20FF;     --neon-color-7-rgb: 106, 32, 255;
  --neon-color-8: #9A6AFF;     --neon-color-8-rgb: 154, 106, 255;
  --neon-color-9: #F85555;     --neon-color-9-rgb: 248, 85, 85;
  --neon-color-10: #D20707;    --neon-color-10-rgb: 210, 7, 7;
  --neon-color-11: #FFEE62;    --neon-color-11-rgb: 255, 238, 98;
  --neon-color-12: #0079FB;    --neon-color-12-rgb: 0, 121, 251;
  --neon-color-13: #3C52E7;    --neon-color-13-rgb: 60, 82, 231;
  --neon-color-14: #F92C85;    --neon-color-14-rgb: 249, 44, 133;
  --neon-color-15: #FB6340;    --neon-color-15-rgb: 251, 99, 64;

  /* --- Breakpoints y Fuentes --- */
  --breakpoint-xs: 0;
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  --font-family-sans-serif: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

[data-theme="light"] {
    --background-gradient: radial-gradient(circle at bottom right, hsl(0deg 0% 100%), hsl(31.15deg 100% 97.9%));
    --surface-color: rgb(232 227 227 / 60%);
    --surface-border: rgb(187 152 121 / 50%);
    --text-primary: #0b0b0c;
    --text-secondary: #14161d;
    --accent-primary: #fb3b00;
    --accent-primary-hover: #ff7f4d;
    --accent-secondary: #FB6340;
    --accent-brand: #D20707;
    --accent-glow: 0 0 15px rgba(251, 113, 0, 0.4);
    --accent-secondary-glow: 0 0 25px rgba(251, 99, 64, 0.4);
    --shadow-color: rgba(0, 0, 0, 0.1);
}

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

html {
  font-family: var(--font-family-sans-serif);
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  color-scheme: dark light;
}

body {
  margin: 0;
  font-family: var(--font-family-sans-serif);
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.6;
  color: var(--text-primary);
  text-align: left;
  background: var(--background-gradient);
  background-attachment: fixed; 
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden; 
}

article,
aside,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section {
  display: block;
}

/* --- Tipografía Base --- */

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  margin-top: 0;
  margin-bottom: 0.75rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--text-primary);
}

h1, .h1 { font-size: 2.0625rem; }
h2, .h2 { font-size: 1.6875rem; }
h3, .h3 { font-size: 1.4375rem; }
h4, .h4 { font-size: 1.0625rem; }
h5, .h5 { font-size: 0.8125rem; }
h6, .h6 { font-size: 0.75rem; text-transform: uppercase; }

p {
  margin-top: 0;
  margin-bottom: 1rem;
  color: var(--text-secondary);
  font-weight: 500;
}

a {
  color: var(--accent-primary);
  text-decoration: none;
  background-color: transparent;
  transition: color 0.15s ease-in-out;
}

a:hover {
  color: var(--accent-primary-hover);
  text-decoration: none;
}

a:not([href]):not([tabindex]) {
  color: inherit;
  text-decoration: none;
}

a:not([href]):not([tabindex]):hover,
a:not([href]):not([tabindex]):focus {
  color: inherit;
  text-decoration: none;
}

hr {
  margin-top: 2rem;
  margin-bottom: 2rem;
  border: 0;
  border-top: 1px solid var(--surface-border);
}

blockquote {
  margin: 0 0 1.5rem;
  padding: 1.5rem;
  font-size: 0.9625rem;
  background: var(--surface-color);
  border: 1px solid var(--surface-border);
  border-left: 3px solid var(--accent-primary);
  border-radius: 0.5rem;
  color: var(--text-secondary);
}

blockquote-footer {
  display: block;
  font-size: 80%;
  color: var(--text-secondary);
}

blockquote-footer::before {
  content: "\2014\00A0";
}

code {
  font-size: 87.5%;
  color: var(--accent-brand);
  word-break: break-word;
}

img {
  vertical-align: middle;
  border-style: none;
  border-radius: 0.5rem; /* Bordes redondeados por defecto */
}

/* --- Elementos de Formulario (Reset Básico) --- */

button,
input,
select,
optgroup,
textarea {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  background: transparent;
  color: inherit;
}

button:focus,
input:focus,
select:focus,
textarea:focus {
    outline: none;
}

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
  cursor: pointer;
}

/* ... (resto de los resets básicos del original que son mayormente funcionales) */

[tabindex="-1"]:focus {
  outline: 0 !important;
}

abbr[title],
abbr[data-original-title] {
  text-decoration: underline;
  text-decoration: underline dotted;
  cursor: help;
  border-bottom: 0;
  text-decoration-skip-ink: none;
}

address {
  margin-bottom: 1rem;
  font-style: normal;
  line-height: inherit;
}

ol, ul, dl {
  margin-top: 0;
  margin-bottom: 1rem;
}

ol ol, ul ul, ol ul, ul ol {
  margin-bottom: 0;
}

/* =================================================================================
   3. SISTEMA DE REJILLA Y LAYOUT
   Estructura principal de la página (sin cambios visuales importantes aquí).
================================================================================= */

.container {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

@media (min-width: 576px) { .container { max-width: 540px; } }
@media (min-width: 768px) { .container { max-width: 720px; } }
@media (min-width: 992px) { .container { max-width: 960px; } }
@media (min-width: 1200px) { .container { max-width: 1140px; } }

.container-fluid {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

.row {
  display: flex;
  flex-wrap: wrap;
  margin-right: -15px;
  margin-left: -15px;
}

.no-gutters {
  margin-right: 0;
  margin-left: 0;
}

.no-gutters > .col,
.no-gutters > [class*="col-"] {
  padding-right: 0;
  padding-left: 0;
}


.col-1,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9,
.col-10,
.col-11,
.col-12,
.col,
.col-auto,
.col-sm-1,
.col-sm-2,
.col-sm-3,
.col-sm-4,
.col-sm-5,
.col-sm-6,
.col-sm-7,
.col-sm-8,
.col-sm-9,
.col-sm-10,
.col-sm-11,
.col-sm-12,
.col-sm,
.col-sm-auto,
.col-md-1,
.col-md-2,
.col-md-3,
.col-md-4,
.col-md-5,
.col-md-6,
.col-md-7,
.col-md-8,
.col-md-9,
.col-md-10,
.col-md-11,
.col-md-12,
.col-md,
.col-md-auto,
.col-lg-1,
.col-lg-2,
.col-lg-3,
.col-lg-4,
.col-lg-5,
.col-lg-6,
.col-lg-7,
.col-lg-8,
.col-lg-9,
.col-lg-10,
.col-lg-11,
.col-lg-12,
.col-lg,
.col-lg-auto,
.col-xl-1,
.col-xl-2,
.col-xl-3,
.col-xl-4,
.col-xl-5,
.col-xl-6,
.col-xl-7,
.col-xl-8,
.col-xl-9,
.col-xl-10,
.col-xl-11,
.col-xl-12,
.col-xl,
.col-xl-auto {
  position: relative;
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
}

.col {
  flex-basis: 0;
  flex-grow: 1;
  max-width: 100%;
}

.col-auto {
  flex: 0 0 auto;
  width: auto;
  max-width: 100%;
}

.col-1 {
  flex: 0 0 8.333333%;
  max-width: 8.333333%;
}

.col-2 {
  flex: 0 0 16.666667%;
  max-width: 16.666667%;
}

.col-3 {
  flex: 0 0 25%;
  max-width: 25%;
}

.col-4 {
  flex: 0 0 33.333333%;
  max-width: 33.333333%;
}

.col-5 {
  flex: 0 0 41.666667%;
  max-width: 41.666667%;
}

.col-6 {
  flex: 0 0 50%;
  max-width: 50%;
}

.col-7 {
  flex: 0 0 58.333333%;
  max-width: 58.333333%;
}

.col-8 {
  flex: 0 0 66.666667%;
  max-width: 66.666667%;
}

.col-9 {
  flex: 0 0 75%;
  max-width: 75%;
}

.col-10 {
  flex: 0 0 83.333333%;
  max-width: 83.333333%;
}

.col-11 {
  flex: 0 0 91.666667%;
  max-width: 91.666667%;
}

.col-12 {
  flex: 0 0 100%;
  max-width: 100%;
}

.order-first {
  order: -1;
}

.order-last {
  order: 13;
}

.order-0 {
  order: 0;
}

.order-1 {
  order: 1;
}

.order-2 {
  order: 2;
}

.order-3 {
  order: 3;
}

.order-4 {
  order: 4;
}

.order-5 {
  order: 5;
}

.order-6 {
  order: 6;
}

.order-7 {
  order: 7;
}

.order-8 {
  order: 8;
}

.order-9 {
  order: 9;
}

.order-10 {
  order: 10;
}

.order-11 {
  order: 11;
}

.order-12 {
  order: 12;
}

.offset-1 {
  margin-left: 8.333333%;
}

.offset-2 {
  margin-left: 16.666667%;
}

.offset-3 {
  margin-left: 25%;
}

.offset-4 {
  margin-left: 33.333333%;
}

.offset-5 {
  margin-left: 41.666667%;
}

.offset-6 {
  margin-left: 50%;
}

.offset-7 {
  margin-left: 58.333333%;
}

.offset-8 {
  margin-left: 66.666667%;
}

.offset-9 {
  margin-left: 75%;
}

.offset-10 {
  margin-left: 83.333333%;
}

.offset-11 {
  margin-left: 91.666667%;
}

@media (min-width: 576px) {
  .col-sm {
    flex-basis: 0;
    flex-grow: 1;
    max-width: 100%;
  }

  .col-sm-auto {
    flex: 0 0 auto;
    width: auto;
    max-width: 100%;
  }

  .col-sm-1 {
    flex: 0 0 8.333333%;
    max-width: 8.333333%;
  }

  .col-sm-2 {
    flex: 0 0 16.666667%;
    max-width: 16.666667%;
  }

  .col-sm-3 {
    flex: 0 0 25%;
    max-width: 25%;
  }

  .col-sm-4 {
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }

  .col-sm-5 {
    flex: 0 0 41.666667%;
    max-width: 41.666667%;
  }

  .col-sm-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }

  .col-sm-7 {
    flex: 0 0 58.333333%;
    max-width: 58.333333%;
  }

  .col-sm-8 {
    flex: 0 0 66.666667%;
    max-width: 66.666667%;
  }

  .col-sm-9 {
    flex: 0 0 75%;
    max-width: 75%;
  }

  .col-sm-10 {
    flex: 0 0 83.333333%;
    max-width: 83.333333%;
  }

  .col-sm-11 {
    flex: 0 0 91.666667%;
    max-width: 91.666667%;
  }

  .col-sm-12 {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .order-sm-first {
    order: -1;
  }

  .order-sm-last {
    order: 13;
  }

  .order-sm-0 {
    order: 0;
  }

  .order-sm-1 {
    order: 1;
  }

  .order-sm-2 {
    order: 2;
  }

  .order-sm-3 {
    order: 3;
  }

  .order-sm-4 {
    order: 4;
  }

  .order-sm-5 {
    order: 5;
  }

  .order-sm-6 {
    order: 6;
  }

  .order-sm-7 {
    order: 7;
  }

  .order-sm-8 {
    order: 8;
  }

  .order-sm-9 {
    order: 9;
  }

  .order-sm-10 {
    order: 10;
  }

  .order-sm-11 {
    order: 11;
  }

  .order-sm-12 {
    order: 12;
  }

  .offset-sm-0 {
    margin-left: 0;
  }

  .offset-sm-1 {
    margin-left: 8.333333%;
  }

  .offset-sm-2 {
    margin-left: 16.666667%;
  }

  .offset-sm-3 {
    margin-left: 25%;
  }

  .offset-sm-4 {
    margin-left: 33.333333%;
  }

  .offset-sm-5 {
    margin-left: 41.666667%;
  }

  .offset-sm-6 {
    margin-left: 50%;
  }

  .offset-sm-7 {
    margin-left: 58.333333%;
  }

  .offset-sm-8 {
    margin-left: 66.666667%;
  }

  .offset-sm-9 {
    margin-left: 75%;
  }

  .offset-sm-10 {
    margin-left: 83.333333%;
  }

  .offset-sm-11 {
    margin-left: 91.666667%;
  }
}

@media (min-width: 768px) {
  .col-md {
    flex-basis: 0;
    flex-grow: 1;
    max-width: 100%;
  }

  .col-md-auto {
    flex: 0 0 auto;
    width: auto;
    max-width: 100%;
  }

  .col-md-1 {
    flex: 0 0 8.333333%;
    max-width: 8.333333%;
  }

  .col-md-2 {
    flex: 0 0 16.666667%;
    max-width: 16.666667%;
  }

  .col-md-3 {
    flex: 0 0 25%;
    max-width: 25%;
  }

  .col-md-4 {
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }

  .col-md-5 {
    flex: 0 0 41.666667%;
    max-width: 41.666667%;
  }

  .col-md-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }

  .col-md-7 {
    flex: 0 0 58.333333%;
    max-width: 58.333333%;
  }

  .col-md-8 {
    flex: 0 0 66.666667%;
    max-width: 66.666667%;
  }

  .col-md-9 {
    flex: 0 0 75%;
    max-width: 75%;
  }

  .col-md-10 {
    flex: 0 0 83.333333%;
    max-width: 83.333333%;
  }

  .col-md-11 {
    flex: 0 0 91.666667%;
    max-width: 91.666667%;
  }

  .col-md-12 {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .order-md-first {
    order: -1;
  }

  .order-md-last {
    order: 13;
  }

  .order-md-0 {
    order: 0;
  }

  .order-md-1 {
    order: 1;
  }

  .order-md-2 {
    order: 2;
  }

  .order-md-3 {
    order: 3;
  }

  .order-md-4 {
    order: 4;
  }

  .order-md-5 {
    order: 5;
  }

  .order-md-6 {
    order: 6;
  }

  .order-md-7 {
    order: 7;
  }

  .order-md-8 {
    order: 8;
  }

  .order-md-9 {
    order: 9;
  }

  .order-md-10 {
    order: 10;
  }

  .order-md-11 {
    order: 11;
  }

  .order-md-12 {
    order: 12;
  }

  .offset-md-0 {
    margin-left: 0;
  }

  .offset-md-1 {
    margin-left: 8.333333%;
  }

  .offset-md-2 {
    margin-left: 16.666667%;
  }

  .offset-md-3 {
    margin-left: 25%;
  }

  .offset-md-4 {
    margin-left: 33.333333%;
  }

  .offset-md-5 {
    margin-left: 41.666667%;
  }

  .offset-md-6 {
    margin-left: 50%;
  }

  .offset-md-7 {
    margin-left: 58.333333%;
  }

  .offset-md-8 {
    margin-left: 66.666667%;
  }

  .offset-md-9 {
    margin-left: 75%;
  }

  .offset-md-10 {
    margin-left: 83.333333%;
  }

  .offset-md-11 {
    margin-left: 91.666667%;
  }
}

@media (min-width: 992px) {
  .col-lg {
    flex-basis: 0;
    flex-grow: 1;
    max-width: 100%;
  }

  .col-lg-auto {
    flex: 0 0 auto;
    width: auto;
    max-width: 100%;
  }

  .col-lg-1 {
    flex: 0 0 8.333333%;
    max-width: 8.333333%;
  }

  .col-lg-2 {
    flex: 0 0 16.666667%;
    max-width: 16.666667%;
  }

  .col-lg-3 {
    flex: 0 0 25%;
    max-width: 25%;
  }

  .col-lg-4 {
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }

  .col-lg-5 {
    flex: 0 0 41.666667%;
    max-width: 41.666667%;
  }

  .col-lg-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }

  .col-lg-7 {
    flex: 0 0 58.333333%;
    max-width: 58.333333%;
  }

  .col-lg-8 {
    flex: 0 0 66.666667%;
    max-width: 66.666667%;
  }

  .col-lg-9 {
    flex: 0 0 75%;
    max-width: 75%;
  }

  .col-lg-10 {
    flex: 0 0 83.333333%;
    max-width: 83.333333%;
  }

  .col-lg-11 {
    flex: 0 0 91.666667%;
    max-width: 91.666667%;
  }

  .col-lg-12 {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .order-lg-first {
    order: -1;
  }

  .order-lg-last {
    order: 13;
  }

  .order-lg-0 {
    order: 0;
  }

  .order-lg-1 {
    order: 1;
  }

  .order-lg-2 {
    order: 2;
  }

  .order-lg-3 {
    order: 3;
  }

  .order-lg-4 {
    order: 4;
  }

  .order-lg-5 {
    order: 5;
  }

  .order-lg-6 {
    order: 6;
  }

  .order-lg-7 {
    order: 7;
  }

  .order-lg-8 {
    order: 8;
  }

  .order-lg-9 {
    order: 9;
  }

  .order-lg-10 {
    order: 10;
  }

  .order-lg-11 {
    order: 11;
  }

  .order-lg-12 {
    order: 12;
  }

  .offset-lg-0 {
    margin-left: 0;
  }

  .offset-lg-1 {
    margin-left: 8.333333%;
  }

  .offset-lg-2 {
    margin-left: 16.666667%;
  }

  .offset-lg-3 {
    margin-left: 25%;
  }

  .offset-lg-4 {
    margin-left: 33.333333%;
  }

  .offset-lg-5 {
    margin-left: 41.666667%;
  }

  .offset-lg-6 {
    margin-left: 50%;
  }

  .offset-lg-7 {
    margin-left: 58.333333%;
  }

  .offset-lg-8 {
    margin-left: 66.666667%;
  }

  .offset-lg-9 {
    margin-left: 75%;
  }

  .offset-lg-10 {
    margin-left: 83.333333%;
  }

  .offset-lg-11 {
    margin-left: 91.666667%;
  }
}

@media (min-width: 1200px) {
  .col-xl {
    flex-basis: 0;
    flex-grow: 1;
    max-width: 100%;
  }

  .col-xl-auto {
    flex: 0 0 auto;
    width: auto;
    max-width: 100%;
  }

  .col-xl-1 {
    flex: 0 0 8.333333%;
    max-width: 8.333333%;
  }

  .col-xl-2 {
    flex: 0 0 16.666667%;
    max-width: 16.666667%;
  }

  .col-xl-3 {
    flex: 0 0 25%;
    max-width: 25%;
  }

  .col-xl-4 {
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }

  .col-xl-5 {
    flex: 0 0 41.666667%;
    max-width: 41.666667%;
  }

  .col-xl-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }

  .col-xl-7 {
    flex: 0 0 58.333333%;
    max-width: 58.333333%;
  }

  .col-xl-8 {
    flex: 0 0 66.666667%;
    max-width: 66.666667%;
  }

  .col-xl-9 {
    flex: 0 0 75%;
    max-width: 75%;
  }

  .col-xl-10 {
    flex: 0 0 83.333333%;
    max-width: 83.333333%;
  }

  .col-xl-11 {
    flex: 0 0 91.666667%;
    max-width: 91.666667%;
  }

  .col-xl-12 {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .order-xl-first {
    order: -1;
  }

  .order-xl-last {
    order: 13;
  }

  .order-xl-0 {
    order: 0;
  }

  .order-xl-1 {
    order: 1;
  }

  .order-xl-2 {
    order: 2;
  }

  .order-xl-3 {
    order: 3;
  }

  .order-xl-4 {
    order: 4;
  }

  .order-xl-5 {
    order: 5;
  }

  .order-xl-6 {
    order: 6;
  }

  .order-xl-7 {
    order: 7;
  }

  .order-xl-8 {
    order: 8;
  }

  .order-xl-9 {
    order: 9;
  }

  .order-xl-10 {
    order: 10;
  }

  .order-xl-11 {
    order: 11;
  }

  .order-xl-12 {
    order: 12;
  }

  .offset-xl-0 {
    margin-left: 0;
  }

  .offset-xl-1 {
    margin-left: 8.333333%;
  }

  .offset-xl-2 {
    margin-left: 16.666667%;
  }

  .offset-xl-3 {
    margin-left: 25%;
  }

  .offset-xl-4 {
    margin-left: 33.333333%;
  }

  .offset-xl-5 {
    margin-left: 41.666667%;
  }

  .offset-xl-6 {
    margin-left: 50%;
  }

  .offset-xl-7 {
    margin-left: 58.333333%;
  }

  .offset-xl-8 {
    margin-left: 66.666667%;
  }

  .offset-xl-9 {
    margin-left: 75%;
  }

  .offset-xl-10 {
    margin-left: 83.333333%;
  }

  .offset-xl-11 {
    margin-left: 91.666667%;
  }
}
/* =================================================================================
   4. COMPONENT: TABLAS (TABLES)
   Refactorizado para la estética Glassmorphism.
================================================================================= */

.table {
  width: 100%;
  margin-bottom: 1rem;
  color: var(--text-secondary); /* Usa el color de texto secundario para el cuerpo */
  background-color: transparent; /* CLAVE: La tabla es transparente, el fondo lo da su contenedor (.card) */
  border-collapse: collapse; /* Mantiene el colapso de bordes */
}

.table th,
.table td {
  padding: 1rem;
  vertical-align: middle; /* Centrado vertical para un look más limpio */
  border-top: none; /* Eliminamos el borde superior original */
  border-bottom: 1px solid var(--surface-border); /* Usamos borde inferior para separar filas */
}

/* --- Encabezado de la Tabla --- */
.table thead th {
  vertical-align: bottom;
  border-bottom: 2px solid var(--surface-border); /* Borde más grueso para el header */
  color: var(--text-primary);
  font-size: 0.8rem;
  text-transform: uppercase;
  font-weight: 600;
}

/* --- Cuerpo de la Tabla --- */
.table tbody + tbody {
  border-top: none; /* No se necesita con el nuevo sistema de bordes */
}

/* Elimina el borde de la última fila para una mejor integración en las tarjetas */
.table tbody tr:last-child td {
  border-bottom: none;
}

/* --- Modificadores de Tabla --- */

.table-sm th,
.table-sm td {
  padding: 0.5rem;
}

.table-bordered {
  border: 1px solid var(--surface-border);
}

.table-bordered th,
.table-bordered td {
  border: 1px solid var(--surface-border);
}

.table-bordered thead th,
.table-bordered thead td {
  border-bottom-width: 2px;
}

.table-borderless th,
.table-borderless td,
.table-borderless thead th,
.table-borderless tbody + tbody {
  border: 0;
}

/* --- Estado Hover --- */
.table-hover tbody tr {
  transition: background-color 0.15s ease-in-out;
}

.table-hover tbody tr:hover {
  color: var(--text-primary);
  background-color: rgba(255, 255, 255, 0.05); /* Resaltado sutil para tema oscuro */
}

[data-theme="light"] .table-hover tbody tr:hover {
    background-color: rgba(0, 0, 0, 0.03); /* Resaltado sutil para tema claro */
}


/* --- Estilos Obsoletos (Eliminados) --- */
/* 
   NOTA: Las clases como .table-striped, .table-primary, .table-success, .table-dark, etc., 
   han sido eliminadas intencionadamente. Sus fondos de colores sólidos no son compatibles 
   con la estética "Glassmorphism". El estado (ej. success, danger) debe ser comunicado 
   a través de otros elementos como badges o íconos.
*/
.table-active,
.table-active > th,
.table-active > td {
  background-color: rgba(255, 255, 255, 0.07); /* Mantenemos una versión sutil de .table-active */
}

[data-theme="light"] .table-active,
[data-theme="light"] .table-active > th,
[data-theme="light"] .table-active > td {
  background-color: rgba(0, 0, 0, 0.05);
}


/* --- Responsividad de Tablas (Sin cambios) --- */
/* 
   Estos estilos son estructurales y se mantienen para la funcionalidad responsive.
*/
@media (max-width: 575.98px) {
  .table-responsive-sm {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .table-responsive-sm > .table-bordered {
    border: 0;
  }
}

@media (max-width: 767.98px) {
  .table-responsive-md {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .table-responsive-md > .table-bordered {
    border: 0;
  }
}

@media (max-width: 991.98px) {
  .table-responsive-lg {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .table-responsive-lg > .table-bordered {
    border: 0;
  }
}

@media (max-width: 1199.98px) {
  .table-responsive-xl {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .table-responsive-xl > .table-bordered {
    border: 0;
  }
}

.table-responsive {
  display: block;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.table-responsive > .table-bordered {
  border: 0;
}
/* =================================================================================
   5. COMPONENT: FORMULARIOS (FORMS)
   Refactorizado para la estética Glassmorphism.
================================================================================= */

/* --- Estilo Base para Controles de Formulario --- */
.form-control {
  display: block;
  width: 100%;
  height: calc(1.5em + 1rem + 2px);
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--text-primary);
  background-color: rgba(0, 0, 0, 0.1); /* Fondo sutil y translúcido */
  background-clip: padding-box;
  border: 1px solid var(--surface-border);
  border-radius: 0.5rem; /* Bordes más redondeados */
  box-shadow: none;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
  .form-control {
    transition: none;
  }
}

.form-control::-ms-expand {
  background-color: transparent;
  border: 0;
}

.form-control:focus {
  color: var(--text-primary);
  background-color: rgba(0, 0, 0, 0.2);
  border-color: var(--accent-primary);
  outline: 0;
  box-shadow: var(--accent-glow);
}

.form-control::placeholder {
  color: var(--text-secondary);
  opacity: 0.8;
}

.form-control:disabled,
.form-control[readonly] {
  background-color: rgba(0, 0, 0, 0.2);
  opacity: 0.5;
  cursor: not-allowed;
}

[data-theme="light"] .form-control {
  background-color: rgba(255, 255, 255, 0.5);
}

[data-theme="light"] .form-control:focus {
  background-color: rgba(255, 255, 255, 0.8);
}


select.form-control:focus::-ms-value {
  color: var(--text-primary);
  background-color: transparent;
}

textarea.form-control {
  height: auto;
  min-height: 80px;
}

/* --- Estructura de Formularios --- */
.form-group {
  margin-bottom: 1.5rem;
  position: relative;
}

label {
  display: inline-block;
  margin-bottom: 0.5rem;
  color: var(--text-secondary);
  font-size: 0.8rem;
  font-weight: 500;
}

.form-text {
  display: block;
  margin-top: 0.25rem;
  color: var(--text-secondary);
  font-size: 0.75rem;
}

.form-row {
  display: flex;
  flex-wrap: wrap;
  margin-right: -10px;
  margin-left: -10px;
}

.form-row > .col,
.form-row > [class*="col-"] {
  padding-right: 10px;
  padding-left: 10px;
}

/* --- Variaciones de Tamaño --- */
.form-control-sm {
  height: calc(1.5em + 0.5rem + 2px);
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  border-radius: 0.4rem;
}

.form-control-lg {
  height: calc(1.5em + 1.5rem + 2px);
  padding: 0.75rem 1.25rem;
  font-size: 1rem;
  border-radius: 0.6rem;
}

/* --- Labels de Columna (para layouts horizontales) --- */
.col-form-label {
  padding-top: calc(0.5rem + 1px);
  padding-bottom: calc(0.5rem + 1px);
  margin-bottom: 0;
  font-size: inherit;
  line-height: 1.5;
}

.col-form-label-lg {
  padding-top: calc(0.75rem + 1px);
  padding-bottom: calc(0.75rem + 1px);
  font-size: 1rem;
  line-height: 1.5;
}

.col-form-label-sm {
  padding-top: calc(0.25rem + 1px);
  padding-bottom: calc(0.25rem + 1px);
  font-size: 0.75rem;
  line-height: 1.5;
}

.form-control-plaintext {
  display: block;
  width: 100%;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  margin-bottom: 0;
  line-height: 1.5;
  color: var(--text-primary);
  background-color: transparent;
  border: solid transparent;
  border-width: 1px 0;
}

/* --- Checkboxes y Radios --- */
.form-check {
  position: relative;
  display: block;
  padding-left: 1.5rem;
}

.form-check-input {
  position: absolute;
  margin-top: 0.3rem;
  margin-left: -1.5rem;
}

.form-check-input:disabled ~ .form-check-label {
  color: var(--text-secondary);
  opacity: 0.5;
}

.form-check-label {
  margin-bottom: 0;
  color: var(--text-primary);
  font-weight: 400;
}

.form-check-inline {
  display: inline-flex;
  align-items: center;
  padding-left: 0;
  margin-right: 0.75rem;
}

.form-check-inline .form-check-input {
  position: static;
  margin-top: 0;
  margin-right: 0.3125rem;
  margin-left: 0;
}

/* --- Estados de Validación --- */

.valid-feedback {
  display: none;
  width: 100%;
  margin-top: 0.25rem;
  font-size: 0.8rem;
  color: var(--accent-primary);
}

.valid-tooltip {
  position: absolute;
  top: 100%;
  z-index: 5;
  display: none;
  max-width: 100%;
  padding: 0.25rem 0.5rem;
  margin-top: .1rem;
  font-size: 0.75rem;
  line-height: 1.5;
  color: #fff;
  background-color: rgba(48, 240, 192, 0.9);
  border-radius: 0.25rem;
}

.was-validated .form-control:valid,
.form-control.is-valid {
  border-color: var(--accent-primary);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%2330f0c0' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: center right 1rem;
  background-size: 1rem 1rem;
}

.was-validated .form-control:valid:focus,
.form-control.is-valid:focus {
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 0.2rem rgba(48, 240, 192, 0.25);
}

.was-validated .form-control:valid ~ .valid-feedback,
.form-control.is-valid ~ .valid-feedback {
  display: block;
}

.invalid-feedback {
  display: none;
  width: 100%;
  margin-top: 0.25rem;
  font-size: 0.8rem;
  color: var(--accent-brand);
}

.invalid-tooltip {
  position: absolute;
  top: 100%;
  z-index: 5;
  display: none;
  max-width: 100%;
  padding: 0.25rem 0.5rem;
  margin-top: .1rem;
  font-size: 0.75rem;
  line-height: 1.5;
  color: #fff;
  background-color: rgba(229, 57, 53, 0.9);
  border-radius: 0.25rem;
}

.was-validated .form-control:invalid,
.form-control.is-invalid {
  border-color: var(--accent-brand);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23E53935' viewBox='-2 -2 7 7'%3e%3cpath stroke='%23E53935' d='M0 0l3 3m0-3L0 3'/%3e%3ccircle r='.5'/%3e%3ccircle cx='3' r='.5'/%3e%3ccircle cy='3' r='.5'/%3e%3ccircle cx='3' cy='3' r='.5'/%3e%3c/svg%3E");
  background-repeat: no-repeat;
  background-position: center right 1rem;
  background-size: 1rem 1rem;
}

.was-validated .form-control:invalid:focus,
.form-control.is-invalid:focus {
  border-color: var(--accent-brand);
  box-shadow: 0 0 0 0.2rem rgba(229, 57, 53, 0.25);
}

.was-validated .form-control:invalid ~ .invalid-feedback,
.form-control.is-invalid ~ .invalid-feedback {
  display: block;
}


/* --- Form Inline (sin cambios visuales mayores, se mantiene por estructura) --- */
.form-inline {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
}

.form-inline .form-check {
  width: 100%;
}

@media (min-width: 576px) {
  .form-inline label {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0;
  }
  .form-inline .form-group {
    display: flex;
    flex: 0 0 auto;
    flex-flow: row wrap;
    align-items: center;
    margin-bottom: 0;
  }
  .form-inline .form-control {
    display: inline-block;
    width: auto;
    vertical-align: middle;
  }
  .form-inline .form-control-plaintext {
    display: inline-block;
  }
  .form-inline .input-group,
  .form-inline .custom-select {
    width: auto;
  }
  .form-inline .form-check {
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    padding-left: 0;
  }
  .form-inline .form-check-input {
    position: relative;
    flex-shrink: 0;
    margin-top: 0;
    margin-right: 0.25rem;
    margin-left: 0;
  }
  .form-inline .custom-control {
    align-items: center;
    justify-content: center;
  }
  .form-inline .custom-control-label {
    margin-bottom: 0;
  }
}

/* =================================================================================
   6. COMPONENT: BOTONES (BUTTONS)
   Refactorizado para la estética Glassmorphism con variantes claras.
================================================================================= */

/* --- Estilo Base del Botón (Equivalente a Secundario/Terciario) --- */
.btn {
  display: inline-block;
  font-weight: 500;
  color: var(--text-primary);
  text-align: center;
  vertical-align: middle;
  user-select: none;
  background-color: rgba(255, 255, 255, 0.05); /* Fondo de vidrio sutil */
  border: 1px solid var(--surface-border);
  padding: 0.75rem 1.5rem; /* Padding ajustado para un look más moderno */
  font-size: 0.875rem;
  line-height: 1.5;
  border-radius: 0.75rem; /* Bordes más redondeados */
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  text-decoration: none;
}

@media (prefers-reduced-motion: reduce) {
  .btn {
    transition: none;
  }
}

.btn:hover {
  color: var(--text-primary);
  text-decoration: none;
  background-color: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px); /* Efecto de elevación */
  box-shadow: 0 4px 20px 0 var(--shadow-color);
}

.btn:focus,
.btn.focus {
  outline: 0;
  box-shadow: 0 0 0 2px var(--accent-primary);
}

.btn.disabled,
.btn:disabled {
  opacity: 0.5;
  box-shadow: none;
  transform: none;
  cursor: not-allowed;
}

.btn:not(:disabled):not(.disabled):active,
.btn:not(:disabled):not(.disabled).active {
  box-shadow: none;
  transform: translateY(0);
  background-color: rgba(0, 0, 0, 0.1);
}

a.btn.disabled,
fieldset:disabled a.btn {
  pointer-events: none;
}


/* --- Botón Primario (Acción Principal) --- */
.btn-primary {
  color: #000; /* Texto oscuro para contraste con fondo claro */
  background-color: var(--accent-primary);
  border-color: var(--accent-primary);
  box-shadow: var(--accent-glow);
}

.btn-primary:hover {
  color: #000;
  background-color: var(--accent-primary-hover);
  border-color: var(--accent-primary-hover);
  transform: translateY(-2px);
  box-shadow: 0 0 20px var(--accent-primary); /* Brillo intensificado en hover */
}

.btn-primary:focus,
.btn-primary.focus {
  color: #000;
  background-color: var(--accent-primary-hover);
  border-color: var(--accent-primary-hover);
  box-shadow: 0 0 0 2px var(--accent-primary), var(--accent-glow);
}

.btn-primary.disabled,
.btn-primary:disabled {
  color: #000;
  background-color: var(--accent-primary);
  border-color: var(--accent-primary);
  opacity: 0.5;
}

.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle {
  color: #000;
  background-color: var(--accent-primary);
  border-color: var(--accent-primary);
  box-shadow: none;
  transform: translateY(0);
}


/* --- Botón de Marca / Peligro --- */
.btn-danger {
  color: #ffffff;
  background-color: var(--accent-brand);
  border-color: var(--accent-brand);
  box-shadow: 0 0 15px rgba(229, 57, 53, 0.5);
}

.btn-danger:hover {
  color: #ffffff;
  background-color: #ff5252;
  border-color: #ff5252;
  transform: translateY(-2px);
  box-shadow: 0 0 20px rgba(229, 57, 53, 0.7);
}

.btn-danger:focus,
.btn-danger.focus {
  color: #ffffff;
  background-color: #ff5252;
  border-color: #ff5252;
  box-shadow: 0 0 0 2px var(--accent-brand), 0 0 15px rgba(229, 57, 53, 0.5);
}

.btn-danger.disabled,
.btn-danger:disabled {
  color: #ffffff;
  background-color: var(--accent-brand);
  border-color: var(--accent-brand);
  opacity: 0.5;
}

.btn-danger:not(:disabled):not(.disabled):active,
.btn-danger:not(:disabled):not(.disabled).active,
.show > .btn-danger.dropdown-toggle {
  color: #ffffff;
  background-color: var(--accent-brand);
  border-color: var(--accent-brand);
  box-shadow: none;
  transform: translateY(0);
}


/*
  NOTA: Las clases .btn-secondary, .btn-success, .btn-info, y .btn-warning han sido eliminadas
  para promover un sistema de diseño más limpio.
  - El `.btn` base ahora funciona como el botón secundario.
  - El estado de "éxito" se puede aplicar a `.btn-primary` en contextos apropiados.
  - El estado de "peligro/advertencia" se maneja con `.btn-danger`.
*/

/* --- Placeholder para .btn-secondary si se necesita explícitamente --- */
/*
   Si necesitas una clase .btn-secondary por compatibilidad, simplemente puedes hacer que herede de .btn.
   Ejemplo: .btn-secondary { ...mismos estilos que .btn... }
   Pero es mejor usar solo .btn para la acción secundaria.
*/
.btn-secondary {
  display: inline-block;
  font-weight: 500;
  color: var(--text-primary);
  text-align: center;
  vertical-align: middle;
  user-select: none;
  background-color: rgba(255, 255, 255, 0.05); /* Fondo de vidrio sutil */
  border: 1px solid var(--surface-border);
  padding: 0.75rem 1.5rem;
  font-size: 0.875rem;
  line-height: 1.5;
  border-radius: 0.75rem;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  text-decoration: none;
}

.btn-secondary:hover {
  color: var(--text-primary);
  background-color: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
  box-shadow: 0 4px 20px 0 var(--shadow-color);
}



.btn-light {
  color: #ffffff;
  background-color: #adb5bd;
  border-color: #adb5bd;
  box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);
}

.btn-light:hover {
  color: #ffffff;
  background-color: #98a2ac;
  border-color: #919ca6;
}

.btn-light:focus,
.btn-light.focus {
  box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08), 0 0 0 0 rgba(185, 192, 199, 0.5);
}

.btn-light.disabled,
.btn-light:disabled {
  color: #ffffff;
  background-color: #adb5bd;
  border-color: #adb5bd;
}

.btn-light:not(:disabled):not(.disabled):active,
.btn-light:not(:disabled):not(.disabled).active,
.show>.btn-light.dropdown-toggle {
  color: #ffffff;
  background-color: #919ca6;
  border-color: #8a95a1;
}

.btn-light:not(:disabled):not(.disabled):active:focus,
.btn-light:not(:disabled):not(.disabled).active:focus,
.show>.btn-light.dropdown-toggle:focus {
  box-shadow: 0 0 0 0 rgba(185, 192, 199, 0.5);
}

.btn-dark {
  color: #ffffff;
  background-color: #212529;
  border-color: #212529;
  box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);
}

.btn-dark:hover {
  color: #ffffff;
  background-color: #101214;
  border-color: #0a0c0d;
}

.btn-dark:focus,
.btn-dark.focus {
  box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08), 0 0 0 0 rgba(66, 70, 73, 0.5);
}

.btn-dark.disabled,
.btn-dark:disabled {
  color: #ffffff;
  background-color: #212529;
  border-color: #212529;
}

.btn-dark:not(:disabled):not(.disabled):active,
.btn-dark:not(:disabled):not(.disabled).active,
.show>.btn-dark.dropdown-toggle {
  color: #ffffff;
  background-color: #0a0c0d;
  border-color: #050506;
}

.btn-dark:not(:disabled):not(.disabled):active:focus,
.btn-dark:not(:disabled):not(.disabled).active:focus,
.show>.btn-dark.dropdown-toggle:focus {
  box-shadow: 0 0 0 0 rgba(66, 70, 73, 0.5);
}

.btn-default {
  color: #ffffff;
  background-color: #344675;
  border-color: #344675;
  box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);
}

.btn-default:hover {
  color: #ffffff;
  background-color: #28365b;
  border-color: #243152;
}

.btn-default:focus,
.btn-default.focus {
  box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08), 0 0 0 0 rgba(82, 98, 138, 0.5);
}

.btn-default.disabled,
.btn-default:disabled {
  color: #ffffff;
  background-color: #344675;
  border-color: #344675;
}

.btn-default:not(:disabled):not(.disabled):active,
.btn-default:not(:disabled):not(.disabled).active,
.show>.btn-default.dropdown-toggle {
  color: #ffffff;
  background-color: #243152;
  border-color: #202c49;
}

.btn-default:not(:disabled):not(.disabled):active:focus,
.btn-default:not(:disabled):not(.disabled).active:focus,
.show>.btn-default.dropdown-toggle:focus {
  box-shadow: 0 0 0 0 rgba(82, 98, 138, 0.5);
}

.btn-white {
  color: #212529;
  background-color: #ffffff;
  border-color: #ffffff;
  box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);
}

.btn-white:hover {
  color: #212529;
  background-color: #ececec;
  border-color: #e6e6e6;
}

.btn-white:focus,
.btn-white.focus {
  box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08), 0 0 0 0 rgba(222, 222, 223, 0.5);
}

.btn-white.disabled,
.btn-white:disabled {
  color: #212529;
  background-color: #ffffff;
  border-color: #ffffff;
}

.btn-white:not(:disabled):not(.disabled):active,
.btn-white:not(:disabled):not(.disabled).active,
.show>.btn-white.dropdown-toggle {
  color: #212529;
  background-color: #e6e6e6;
  border-color: #dfdfdf;
}

.btn-white:not(:disabled):not(.disabled):active:focus,
.btn-white:not(:disabled):not(.disabled).active:focus,
.show>.btn-white.dropdown-toggle:focus {
  box-shadow: 0 0 0 0 rgba(222, 222, 223, 0.5);
}

.btn-neutral {
  color: #212529;
  background-color: #ffffff;
  border-color: #ffffff;
  box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);
}

.btn-neutral:hover {
  color: #212529;
  background-color: #ececec;
  border-color: #e6e6e6;
}

.btn-neutral:focus,
.btn-neutral.focus {
  box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08), 0 0 0 0 rgba(222, 222, 223, 0.5);
}

.btn-neutral.disabled,
.btn-neutral:disabled {
  color: #212529;
  background-color: #ffffff;
  border-color: #ffffff;
}

.btn-neutral:not(:disabled):not(.disabled):active,
.btn-neutral:not(:disabled):not(.disabled).active,
.show>.btn-neutral.dropdown-toggle {
  color: #212529;
  background-color: #e6e6e6;
  border-color: #dfdfdf;
}

.btn-neutral:not(:disabled):not(.disabled):active:focus,
.btn-neutral:not(:disabled):not(.disabled).active:focus,
.show>.btn-neutral.dropdown-toggle:focus {
  box-shadow: 0 0 0 0 rgba(222, 222, 223, 0.5);
}

.btn-darker {
  color: #ffffff;
  background-color: black;
  border-color: black;
  box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);
}

.btn-darker:hover {
  color: #ffffff;
  background-color: black;
  border-color: black;
}

.btn-darker:focus,
.btn-darker.focus {
  box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08), 0 0 0 0 rgba(38, 38, 38, 0.5);
}

.btn-darker.disabled,
.btn-darker:disabled {
  color: #ffffff;
  background-color: black;
  border-color: black;
}

.btn-darker:not(:disabled):not(.disabled):active,
.btn-darker:not(:disabled):not(.disabled).active,
.show>.btn-darker.dropdown-toggle {
  color: #ffffff;
  background-color: black;
  border-color: black;
}

.btn-darker:not(:disabled):not(.disabled):active:focus,
.btn-darker:not(:disabled):not(.disabled).active:focus,
.show>.btn-darker.dropdown-toggle:focus {
  box-shadow: 0 0 0 0 rgba(38, 38, 38, 0.5);
}

.btn-outline-primary {
  color: #e14eca;
  border-color: #e14eca;
}

.btn-outline-primary:hover {
  color: #ffffff;
  background-color: #e14eca;
  border-color: #e14eca;
}

.btn-outline-primary:focus,
.btn-outline-primary.focus {
  box-shadow: 0 0 0 0 rgba(225, 78, 202, 0.5);
}

.btn-outline-primary.disabled,
.btn-outline-primary:disabled {
  color: #e14eca;
  background-color: transparent;
}

.btn-outline-primary:not(:disabled):not(.disabled):active,
.btn-outline-primary:not(:disabled):not(.disabled).active,
.show>.btn-outline-primary.dropdown-toggle {
  color: #ffffff;
  background-color: #e14eca;
  border-color: #e14eca;
}

.btn-outline-primary:not(:disabled):not(.disabled):active:focus,
.btn-outline-primary:not(:disabled):not(.disabled).active:focus,
.show>.btn-outline-primary.dropdown-toggle:focus {
  box-shadow: 0 0 0 0 rgba(225, 78, 202, 0.5);
}

.btn-outline-secondary {
  color: #f4f5f7;
  border-color: #f4f5f7;
}

.btn-outline-secondary:hover {
  color: #212529;
  background-color: #f4f5f7;
  border-color: #f4f5f7;
}

.btn-outline-secondary:focus,
.btn-outline-secondary.focus {
  box-shadow: 0 0 0 0 rgba(244, 245, 247, 0.5);
}

.btn-outline-secondary.disabled,
.btn-outline-secondary:disabled {
  color: #f4f5f7;
  background-color: transparent;
}

.btn-outline-secondary:not(:disabled):not(.disabled):active,
.btn-outline-secondary:not(:disabled):not(.disabled).active,
.show>.btn-outline-secondary.dropdown-toggle {
  color: #212529;
  background-color: #f4f5f7;
  border-color: #f4f5f7;
}

.btn-outline-secondary:not(:disabled):not(.disabled):active:focus,
.btn-outline-secondary:not(:disabled):not(.disabled).active:focus,
.show>.btn-outline-secondary.dropdown-toggle:focus {
  box-shadow: 0 0 0 0 rgba(244, 245, 247, 0.5);
}

.btn-outline-success {
  color: #00f2c3;
  border-color: #00f2c3;
}

.btn-outline-success:hover {
  color: #ffffff;
  background-color: #00f2c3;
  border-color: #00f2c3;
}

.btn-outline-success:focus,
.btn-outline-success.focus {
  box-shadow: 0 0 0 0 rgba(0, 242, 195, 0.5);
}

.btn-outline-success.disabled,
.btn-outline-success:disabled {
  color: #00f2c3;
  background-color: transparent;
}

.btn-outline-success:not(:disabled):not(.disabled):active,
.btn-outline-success:not(:disabled):not(.disabled).active,
.show>.btn-outline-success.dropdown-toggle {
  color: #ffffff;
  background-color: #00f2c3;
  border-color: #00f2c3;
}

.btn-outline-success:not(:disabled):not(.disabled):active:focus,
.btn-outline-success:not(:disabled):not(.disabled).active:focus,
.show>.btn-outline-success.dropdown-toggle:focus {
  box-shadow: 0 0 0 0 rgba(0, 242, 195, 0.5);
}

.btn-outline-info {
  color: #1d8cf8;
  border-color: #1d8cf8;
}

.btn-outline-info:hover {
  color: #ffffff;
  background-color: #1d8cf8;
  border-color: #1d8cf8;
}

.btn-outline-info:focus,
.btn-outline-info.focus {
  box-shadow: 0 0 0 0 rgba(29, 140, 248, 0.5);
}

.btn-outline-info.disabled,
.btn-outline-info:disabled {
  color: #1d8cf8;
  background-color: transparent;
}

.btn-outline-info:not(:disabled):not(.disabled):active,
.btn-outline-info:not(:disabled):not(.disabled).active,
.show>.btn-outline-info.dropdown-toggle {
  color: #ffffff;
  background-color: #1d8cf8;
  border-color: #1d8cf8;
}

.btn-outline-info:not(:disabled):not(.disabled):active:focus,
.btn-outline-info:not(:disabled):not(.disabled).active:focus,
.show>.btn-outline-info.dropdown-toggle:focus {
  box-shadow: 0 0 0 0 rgba(29, 140, 248, 0.5);
}

.btn-outline-warning {
  color: #ff8d72;
  border-color: #ff8d72;
}

.btn-outline-warning:hover {
  color: #ffffff;
  background-color: #ff8d72;
  border-color: #ff8d72;
}

.btn-outline-warning:focus,
.btn-outline-warning.focus {
  box-shadow: 0 0 0 0 rgba(255, 141, 114, 0.5);
}

.btn-outline-warning.disabled,
.btn-outline-warning:disabled {
  color: #ff8d72;
  background-color: transparent;
}

.btn-outline-warning:not(:disabled):not(.disabled):active,
.btn-outline-warning:not(:disabled):not(.disabled).active,
.show>.btn-outline-warning.dropdown-toggle {
  color: #ffffff;
  background-color: #ff8d72;
  border-color: #ff8d72;
}

.btn-outline-warning:not(:disabled):not(.disabled):active:focus,
.btn-outline-warning:not(:disabled):not(.disabled).active:focus,
.show>.btn-outline-warning.dropdown-toggle:focus {
  box-shadow: 0 0 0 0 rgba(255, 141, 114, 0.5);
}

.btn-outline-danger {
  color: #fd5d93;
  border-color: #fd5d93;
}

.btn-outline-danger:hover {
  color: #ffffff;
  background-color: #fd5d93;
  border-color: #fd5d93;
}

.btn-outline-danger:focus,
.btn-outline-danger.focus {
  box-shadow: 0 0 0 0 rgba(253, 93, 147, 0.5);
}

.btn-outline-danger.disabled,
.btn-outline-danger:disabled {
  color: #fd5d93;
  background-color: transparent;
}

.btn-outline-danger:not(:disabled):not(.disabled):active,
.btn-outline-danger:not(:disabled):not(.disabled).active,
.show>.btn-outline-danger.dropdown-toggle {
  color: #ffffff;
  background-color: #fd5d93;
  border-color: #fd5d93;
}

.btn-outline-danger:not(:disabled):not(.disabled):active:focus,
.btn-outline-danger:not(:disabled):not(.disabled).active:focus,
.show>.btn-outline-danger.dropdown-toggle:focus {
  box-shadow: 0 0 0 0 rgba(253, 93, 147, 0.5);
}

.btn-outline-light {
  color: #adb5bd;
  border-color: #adb5bd;
}

.btn-outline-light:hover {
  color: #ffffff;
  background-color: #adb5bd;
  border-color: #adb5bd;
}

.btn-outline-light:focus,
.btn-outline-light.focus {
  box-shadow: 0 0 0 0 rgba(173, 181, 189, 0.5);
}

.btn-outline-light.disabled,
.btn-outline-light:disabled {
  color: #adb5bd;
  background-color: transparent;
}

.btn-outline-light:not(:disabled):not(.disabled):active,
.btn-outline-light:not(:disabled):not(.disabled).active,
.show>.btn-outline-light.dropdown-toggle {
  color: #ffffff;
  background-color: #adb5bd;
  border-color: #adb5bd;
}

.btn-outline-light:not(:disabled):not(.disabled):active:focus,
.btn-outline-light:not(:disabled):not(.disabled).active:focus,
.show>.btn-outline-light.dropdown-toggle:focus {
  box-shadow: 0 0 0 0 rgba(173, 181, 189, 0.5);
}

.btn-outline-dark {
  color: #212529;
  border-color: #212529;
}

.btn-outline-dark:hover {
  color: #ffffff;
  background-color: #212529;
  border-color: #212529;
}

.btn-outline-dark:focus,
.btn-outline-dark.focus {
  box-shadow: 0 0 0 0 rgba(33, 37, 41, 0.5);
}

.btn-outline-dark.disabled,
.btn-outline-dark:disabled {
  color: #212529;
  background-color: transparent;
}

.btn-outline-dark:not(:disabled):not(.disabled):active,
.btn-outline-dark:not(:disabled):not(.disabled).active,
.show>.btn-outline-dark.dropdown-toggle {
  color: #ffffff;
  background-color: #212529;
  border-color: #212529;
}

.btn-outline-dark:not(:disabled):not(.disabled):active:focus,
.btn-outline-dark:not(:disabled):not(.disabled).active:focus,
.show>.btn-outline-dark.dropdown-toggle:focus {
  box-shadow: 0 0 0 0 rgba(33, 37, 41, 0.5);
}

.btn-outline-default {
  color: #344675;
  border-color: #344675;
}

.btn-outline-default:hover {
  color: #ffffff;
  background-color: #344675;
  border-color: #344675;
}

.btn-outline-default:focus,
.btn-outline-default.focus {
  box-shadow: 0 0 0 0 rgba(52, 70, 117, 0.5);
}

.btn-outline-default.disabled,
.btn-outline-default:disabled {
  color: #344675;
  background-color: transparent;
}

.btn-outline-default:not(:disabled):not(.disabled):active,
.btn-outline-default:not(:disabled):not(.disabled).active,
.show>.btn-outline-default.dropdown-toggle {
  color: #ffffff;
  background-color: #344675;
  border-color: #344675;
}

.btn-outline-default:not(:disabled):not(.disabled):active:focus,
.btn-outline-default:not(:disabled):not(.disabled).active:focus,
.show>.btn-outline-default.dropdown-toggle:focus {
  box-shadow: 0 0 0 0 rgba(52, 70, 117, 0.5);
}

.btn-outline-white {
  color: #ffffff;
  border-color: #ffffff;
}

.btn-outline-white:hover {
  color: #212529;
  background-color: #ffffff;
  border-color: #ffffff;
}

.btn-outline-white:focus,
.btn-outline-white.focus {
  box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.5);
}

.btn-outline-white.disabled,
.btn-outline-white:disabled {
  color: #ffffff;
  background-color: transparent;
}

.btn-outline-white:not(:disabled):not(.disabled):active,
.btn-outline-white:not(:disabled):not(.disabled).active,
.show>.btn-outline-white.dropdown-toggle {
  color: #212529;
  background-color: #ffffff;
  border-color: #ffffff;
}

.btn-outline-white:not(:disabled):not(.disabled):active:focus,
.btn-outline-white:not(:disabled):not(.disabled).active:focus,
.show>.btn-outline-white.dropdown-toggle:focus {
  box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.5);
}

.btn-outline-neutral {
  color: #ffffff;
  border-color: #ffffff;
}

.btn-outline-neutral:hover {
  color: #212529;
  background-color: #ffffff;
  border-color: #ffffff;
}

.btn-outline-neutral:focus,
.btn-outline-neutral.focus {
  box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.5);
}

.btn-outline-neutral.disabled,
.btn-outline-neutral:disabled {
  color: #ffffff;
  background-color: transparent;
}

.btn-outline-neutral:not(:disabled):not(.disabled):active,
.btn-outline-neutral:not(:disabled):not(.disabled).active,
.show>.btn-outline-neutral.dropdown-toggle {
  color: #212529;
  background-color: #ffffff;
  border-color: #ffffff;
}

.btn-outline-neutral:not(:disabled):not(.disabled):active:focus,
.btn-outline-neutral:not(:disabled):not(.disabled).active:focus,
.show>.btn-outline-neutral.dropdown-toggle:focus {
  box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.5);
}

.btn-outline-darker {
  color: black;
  border-color: black;
}

.btn-outline-darker:hover {
  color: #ffffff;
  background-color: black;
  border-color: black;
}

.btn-outline-darker:focus,
.btn-outline-darker.focus {
  box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.5);
}

.btn-outline-darker.disabled,
.btn-outline-darker:disabled {
  color: black;
  background-color: transparent;
}

.btn-outline-darker:not(:disabled):not(.disabled):active,
.btn-outline-darker:not(:disabled):not(.disabled).active,
.show>.btn-outline-darker.dropdown-toggle {
  color: #ffffff;
  background-color: black;
  border-color: black;
}

.btn-outline-darker:not(:disabled):not(.disabled):active:focus,
.btn-outline-darker:not(:disabled):not(.disabled).active:focus,
.show>.btn-outline-darker.dropdown-toggle:focus {
  box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.5);
}

.btn-link {
  font-weight: 400;
  color: #e14eca;
  text-decoration: none;
}

.btn-link:hover {
  color: #c221a9;
  text-decoration: none;
}

.btn-link:focus,
.btn-link.focus {
  text-decoration: none;
  box-shadow: none;
}

.btn-link:disabled,
.btn-link.disabled {
  color: #6c757d;
  pointer-events: none;
}

.btn-lg,
.btn-group-lg>.btn {
  padding: 15px 48px;
  font-size: 1em;
  line-height: 1.35;
  border-radius: 0.4285rem;
}

.btn-sm,
.btn-group-sm>.btn {
  padding: 5px 15px;
  font-size: 0.75rem;
  line-height: 1.35;
  border-radius: 0.25rem;
}

.btn-block {
  display: block;
  width: 100%;
}

.btn-block+.btn-block {
  margin-top: 0.5rem;
}

input[type="submit"].btn-block,
input[type="reset"].btn-block,
input[type="button"].btn-block {
  width: 100%;
}

.fade {
  transition: opacity 0.15s linear;
}

@media (prefers-reduced-motion: reduce) {
  .fade {
    transition: none;
  }
}

.fade:not(.show) {
  opacity: 0;
}

.collapse:not(.show) {
  display: none;
}

.collapsing {
  position: relative;
  height: 0;
  overflow: hidden;
  transition: height 0.35s ease;
}

@media (prefers-reduced-motion: reduce) {
  .collapsing {
    transition: none;
  }
}

.dropup,
.dropright,
.dropdown,
.dropleft {
  position: relative;
}

.dropdown-toggle {
  white-space: nowrap;
}

.dropdown-toggle::after {
  display: inline-block;
  margin-left: 0.255em;
  vertical-align: 0.255em;
  content: "";
  border-top: 0.3em solid;
  border-right: 0.3em solid transparent;
  border-bottom: 0;
  border-left: 0.3em solid transparent;
}

.dropdown-toggle:empty::after {
  margin-left: 0;
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  display: none;
  float: left;
  min-width: 10rem;
  padding: 0.5rem 0;
  margin: 0.125rem 0 0;
  font-size: 0.875rem;
  color: #525f7f;
  text-align: left;
  list-style: none;
  background-color: #ffffff;
  background-clip: padding-box;
  border: 0 solid rgba(34, 42, 66, 0.15);
  border-radius: 0.1428rem;
  box-shadow: 0 50px 100px rgba(50, 50, 93, 0.1), 0 15px 35px rgba(50, 50, 93, 0.15), 0 5px 15px rgba(0, 0, 0, 0.1);
}

.dropdown-menu-left {
  right: auto;
  left: 0;
}

.dropdown-menu-right {
  right: 0;
  left: auto;
}

@media (min-width: 576px) {
  .dropdown-menu-sm-left {
    right: auto;
    left: 0;
  }

  .dropdown-menu-sm-right {
    right: 0;
    left: auto;
  }
}

@media (min-width: 768px) {
  .dropdown-menu-md-left {
    right: auto;
    left: 0;
  }

  .dropdown-menu-md-right {
    right: 0;
    left: auto;
  }
}

@media (min-width: 992px) {
  .dropdown-menu-lg-left {
    right: auto;
    left: 0;
  }

  .dropdown-menu-lg-right {
    right: 0;
    left: auto;
  }
}

@media (min-width: 1200px) {
  .dropdown-menu-xl-left {
    right: auto;
    left: 0;
  }

  .dropdown-menu-xl-right {
    right: 0;
    left: auto;
  }
}

.dropup .dropdown-menu {
  top: auto;
  bottom: 100%;
  margin-top: 0;
  margin-bottom: 0.125rem;
}

.dropup .dropdown-toggle::after {
  display: inline-block;
  margin-left: 0.255em;
  vertical-align: 0.255em;
  content: "";
  border-top: 0;
  border-right: 0.3em solid transparent;
  border-bottom: 0.3em solid;
  border-left: 0.3em solid transparent;
}

.dropup .dropdown-toggle:empty::after {
  margin-left: 0;
}

.dropright .dropdown-menu {
  top: 0;
  right: auto;
  left: 100%;
  margin-top: 0;
  margin-left: 0.125rem;
}

.dropright .dropdown-toggle::after {
  display: inline-block;
  margin-left: 0.255em;
  vertical-align: 0.255em;
  content: "";
  border-top: 0.3em solid transparent;
  border-right: 0;
  border-bottom: 0.3em solid transparent;
  border-left: 0.3em solid;
}

.dropright .dropdown-toggle:empty::after {
  margin-left: 0;
}

.dropright .dropdown-toggle::after {
  vertical-align: 0;
}

.dropleft .dropdown-menu {
  top: 0;
  right: 100%;
  left: auto;
  margin-top: 0;
  margin-right: 0.125rem;
}

.dropleft .dropdown-toggle::after {
  display: inline-block;
  margin-left: 0.255em;
  vertical-align: 0.255em;
  content: "";
}

.dropleft .dropdown-toggle::after {
  display: none;
}

.dropleft .dropdown-toggle::before {
  display: inline-block;
  margin-right: 0.255em;
  vertical-align: 0.255em;
  content: "";
  border-top: 0.3em solid transparent;
  border-right: 0.3em solid;
  border-bottom: 0.3em solid transparent;
}

.dropleft .dropdown-toggle:empty::after {
  margin-left: 0;
}

.dropleft .dropdown-toggle::before {
  vertical-align: 0;
}

.dropdown-menu[x-placement^="top"],
.dropdown-menu[x-placement^="right"],
.dropdown-menu[x-placement^="bottom"],
.dropdown-menu[x-placement^="left"] {
  right: auto;
  bottom: auto;
}

.dropdown-divider {
  height: 0;
  margin: 0.5rem 0;
  overflow: hidden;
  border-top: 1px solid #e9ecef;
}

.dropdown-item {
  display: block;
  width: 100%;
  padding: 0.25rem 1.5rem;
  clear: both;
  font-weight: 400;
  color: #212529;
  text-align: inherit;
  white-space: nowrap;
  background-color: transparent;
  border: 0;
}

.dropdown-item:hover,
.dropdown-item:focus {
  color: #16181b;
  text-decoration: none;
  background-color: #f6f9fc;
}

.dropdown-item.active,
.dropdown-item:active {
  color: #ffffff;
  text-decoration: none;
  background-color: #e14eca;
}

.dropdown-item.disabled,
.dropdown-item:disabled {
  color: #6c757d;
  pointer-events: none;
  background-color: transparent;
}

.dropdown-menu.show {
  display: block;
}

.dropdown-header {
  display: block;
  padding: 0.5rem 1.5rem;
  margin-bottom: 0;
  font-size: 0.75rem;
  color: #6c757d;
  white-space: nowrap;
}

.dropdown-item-text {
  display: block;
  padding: 0.25rem 1.5rem;
  color: #212529;
}

.btn-group,
.btn-group-vertical {
  position: relative;
  display: inline-flex;
  vertical-align: middle;
}

.btn-group>.btn,
.btn-group-vertical>.btn {
  position: relative;
  flex: 1 1 auto;
}

.btn-group>.btn:hover,
.btn-group-vertical>.btn:hover {
  z-index: 1;
}

.btn-group>.btn:focus,
.btn-group>.btn:active,
.btn-group>.btn.active,
.btn-group-vertical>.btn:focus,
.btn-group-vertical>.btn:active,
.btn-group-vertical>.btn.active {
  z-index: 1;
}

.btn-toolbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.btn-toolbar .input-group {
  width: auto;
}

.btn-group>.btn:not(:first-child),
.btn-group>.btn-group:not(:first-child) {
  margin-left: -1px;
}

.btn-group>.btn:not(:last-child):not(.dropdown-toggle),
.btn-group>.btn-group:not(:last-child)>.btn {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.btn-group>.btn:not(:first-child),
.btn-group>.btn-group:not(:first-child)>.btn {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.dropdown-toggle-split {
  padding-right: 30px;
  padding-left: 30px;
}

.dropdown-toggle-split::after,
.dropup .dropdown-toggle-split::after,
.dropright .dropdown-toggle-split::after {
  margin-left: 0;
}

.dropleft .dropdown-toggle-split::before {
  margin-right: 0;
}

.btn-sm+.dropdown-toggle-split,
.btn-group-sm>.btn+.dropdown-toggle-split {
  padding-right: 11.25px;
  padding-left: 11.25px;
}

.btn-lg+.dropdown-toggle-split,
.btn-group-lg>.btn+.dropdown-toggle-split {
  padding-right: 36px;
  padding-left: 36px;
}

.btn-group.show .dropdown-toggle {
  box-shadow: none;
}

.btn-group.show .dropdown-toggle.btn-link {
  box-shadow: none;
}

.btn-group-vertical {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

.btn-group-vertical>.btn,
.btn-group-vertical>.btn-group {
  width: 100%;
}

.btn-group-vertical>.btn:not(:first-child),
.btn-group-vertical>.btn-group:not(:first-child) {
  margin-top: -1px;
}

.btn-group-vertical>.btn:not(:last-child):not(.dropdown-toggle),
.btn-group-vertical>.btn-group:not(:last-child)>.btn {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.btn-group-vertical>.btn:not(:first-child),
.btn-group-vertical>.btn-group:not(:first-child)>.btn {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.btn-group-toggle>.btn,
.btn-group-toggle>.btn-group>.btn {
  margin-bottom: 0;
}

.btn-group-toggle>.btn input[type="radio"],
.btn-group-toggle>.btn input[type="checkbox"],
.btn-group-toggle>.btn-group>.btn input[type="radio"],
.btn-group-toggle>.btn-group>.btn input[type="checkbox"] {
  position: absolute;
  clip: rect(0, 0, 0, 0);
  pointer-events: none;
}

.input-group {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  width: 100%;
}

.input-group>.form-control,
.input-group>.form-control-plaintext,
.input-group>.custom-select,
.input-group>.custom-file {
  position: relative;
  flex: 1 1 auto;
  width: 1%;
  margin-bottom: 0;
}

.input-group>.form-control+.form-control,
.input-group>.form-control+.custom-select,
.input-group>.form-control+.custom-file,
.input-group>.form-control-plaintext+.form-control,
.input-group>.form-control-plaintext+.custom-select,
.input-group>.form-control-plaintext+.custom-file,
.input-group>.custom-select+.form-control,
.input-group>.custom-select+.custom-select,
.input-group>.custom-select+.custom-file,
.input-group>.custom-file+.form-control,
.input-group>.custom-file+.custom-select,
.input-group>.custom-file+.custom-file {
  margin-left: -1px;
}

.input-group>.form-control:focus,
.input-group>.custom-select:focus,
.input-group>.custom-file .custom-file-input:focus~.custom-file-label {
  z-index: 3;
}

.input-group>.custom-file .custom-file-input:focus {
  z-index: 4;
}

.input-group>.form-control:not(:last-child),
.input-group>.custom-select:not(:last-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.input-group>.form-control:not(:first-child),
.input-group>.custom-select:not(:first-child) {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.input-group>.custom-file {
  display: flex;
  align-items: center;
}

.input-group>.custom-file:not(:last-child) .custom-file-label,
.input-group>.custom-file:not(:last-child) .custom-file-label::after {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.input-group>.custom-file:not(:first-child) .custom-file-label {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.input-group-prepend,
.input-group-append {
  display: flex;
}

.input-group-prepend .btn,
.input-group-append .btn {
  position: relative;
  z-index: 2;
}

.input-group-prepend .btn:focus,
.input-group-append .btn:focus {
  z-index: 3;
}

.input-group-prepend .btn+.btn,
.input-group-prepend .btn+.input-group-text,
.input-group-prepend .input-group-text+.input-group-text,
.input-group-prepend .input-group-text+.btn,
.input-group-append .btn+.btn,
.input-group-append .btn+.input-group-text,
.input-group-append .input-group-text+.input-group-text,
.input-group-append .input-group-text+.btn {
  margin-left: -1px;
}

.input-group-prepend {
  margin-right: -1px;
}

.input-group-append {
  margin-left: -1px;
}

.input-group-text {
  display: flex;
  align-items: center;
  padding: 0.5rem 0.7rem;
  margin-bottom: 0;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.428571;
  color: #adb5bd;
  text-align: center;
  white-space: nowrap;
  background-color: transparent;
  border: 1px solid #cad1d7;
  border-radius: 0.25rem;
}

.input-group-text input[type="radio"],
.input-group-text input[type="checkbox"] {
  margin-top: 0;
}

.input-group-lg>.form-control:not(textarea),
.input-group-lg>.custom-select {
  height: calc(1.35em + 1.75rem + 2px);
}

.input-group-lg>.form-control,
.input-group-lg>.custom-select,
.input-group-lg>.input-group-prepend>.input-group-text,
.input-group-lg>.input-group-append>.input-group-text,
.input-group-lg>.input-group-prepend>.btn,
.input-group-lg>.input-group-append>.btn {
  padding: 0.875rem 1rem;
  font-size: 0.875rem;
  line-height: 1.35;
  border-radius: 0.4285rem;
}

.input-group-sm>.form-control:not(textarea),
.input-group-sm>.custom-select {
  height: calc(1.35em + 0.5rem + 2px);
}

.input-group-sm>.form-control,
.input-group-sm>.custom-select,
.input-group-sm>.input-group-prepend>.input-group-text,
.input-group-sm>.input-group-append>.input-group-text,
.input-group-sm>.input-group-prepend>.btn,
.input-group-sm>.input-group-append>.btn {
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  line-height: 1.35;
  border-radius: 0.2857rem;
}

.input-group-lg>.custom-select,
.input-group-sm>.custom-select {
  padding-right: 1.7rem;
}

.input-group>.input-group-prepend>.btn,
.input-group>.input-group-prepend>.input-group-text,
.input-group>.input-group-append:not(:last-child)>.btn,
.input-group>.input-group-append:not(:last-child)>.input-group-text,
.input-group>.input-group-append:last-child>.btn:not(:last-child):not(.dropdown-toggle),
.input-group>.input-group-append:last-child>.input-group-text:not(:last-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.input-group>.input-group-append>.btn,
.input-group>.input-group-append>.input-group-text,
.input-group>.input-group-prepend:not(:first-child)>.btn,
.input-group>.input-group-prepend:not(:first-child)>.input-group-text,
.input-group>.input-group-prepend:first-child>.btn:not(:first-child),
.input-group>.input-group-prepend:first-child>.input-group-text:not(:first-child) {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
/* =================================================================================
   6. COMPONENT: CONTROLES DE FORMULARIO PERSONALIZADOS (CUSTOM FORMS)
   Refactorizado para la estética Glassmorphism y el uso de variables.
================================================================================= */

/* --- Base para Checkboxes, Radios y Switches --- */
.custom-control {
  position: relative;
  display: block;
  min-height: 1.5rem;
  padding-left: 1.75rem; /* Ajuste de padding */
}

.custom-control-inline {
  display: inline-flex;
  margin-right: 1rem;
}

.custom-control-input {
  position: absolute;
  left: 0;
  z-index: -1;
  width: 1rem;
  height: 1.25rem;
  opacity: 0;
}

.custom-control-label {
  position: relative;
  margin-bottom: 0;
  vertical-align: top;
  color: var(--text-secondary);
  cursor: pointer;
}

.custom-control-label::before {
  position: absolute;
  top: 0.125rem;
  left: -1.75rem;
  display: block;
  width: 1rem;
  height: 1rem;
  pointer-events: none;
  content: "";
  background-color: transparent;
  border: 1px solid var(--surface-border);
  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.custom-control-label::after {
  position: absolute;
  top: 0.125rem;
  left: -1.75rem;
  display: block;
  width: 1rem;
  height: 1rem;
  content: "";
  background: no-repeat 50% / 50% 50%;
}

.custom-control-input:checked ~ .custom-control-label::before {
  color: #fff;
  border-color: var(--accent-primary);
  background-color: var(--accent-primary);
}

.custom-control-input:focus ~ .custom-control-label::before {
  box-shadow: var(--accent-glow);
}

.custom-control-input:focus:not(:checked) ~ .custom-control-label::before {
  border-color: var(--accent-primary);
}

.custom-control-input:not(:disabled):active ~ .custom-control-label::before {
  background-color: var(--accent-primary-hover);
  border-color: var(--accent-primary-hover);
}

.custom-control-input:disabled ~ .custom-control-label {
  opacity: 0.5;
  cursor: not-allowed;
}

.custom-control-input:disabled ~ .custom-control-label::before {
  background-color: rgba(0, 0, 0, 0.2);
  border-color: var(--surface-border);
}


/* --- Custom Checkbox --- */
.custom-checkbox .custom-control-label::before {
  border-radius: 0.25rem;
}

.custom-checkbox .custom-control-input:checked ~ .custom-control-label::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3e%3c/svg%3e");
}

.custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::before {
  border-color: var(--accent-primary);
  background-color: var(--accent-primary);
}

.custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4'%3e%3cpath stroke='%23fff' d='M0 2h4'/%3e%3c/svg%3e");
}

/* --- Custom Radio --- */
.custom-radio .custom-control-label::before {
  border-radius: 50%;
}

.custom-radio .custom-control-input:checked ~ .custom-control-label::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
}


/* --- Custom Switch --- */
.custom-switch {
  padding-left: 2.75rem;
}

.custom-switch .custom-control-label::before {
  left: -2.75rem;
  width: 2rem;
  height: 1.25rem;
  pointer-events: all;
  border-radius: 0.625rem;
}

.custom-switch .custom-control-label::after {
  top: calc(0.125rem + 2px);
  left: calc(-2.75rem + 2px);
  width: calc(1.25rem - 4px);
  height: calc(1.25rem - 4px);
  background-color: var(--text-secondary);
  border-radius: 50%;
  transition: transform 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
  .custom-switch .custom-control-label::after {
    transition: none;
  }
}

.custom-switch .custom-control-input:checked ~ .custom-control-label::before {
  background-color: var(--accent-primary);
  border-color: var(--accent-primary);
}

.custom-switch .custom-control-input:checked ~ .custom-control-label::after {
  background-color: #fff;
  transform: translateX(0.75rem);
}

.custom-switch .custom-control-input:disabled:checked ~ .custom-control-label::before {
  background-color: rgba(var(--accent-primary), 0.5);
}


/* --- Custom Select (Dropdown) --- */
.custom-select {
  display: inline-block;
  width: 100%;
  height: calc(1.5em + 1rem + 2px);
  padding: 0.5rem 2.25rem 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--text-primary);
  vertical-align: middle;
  background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-chevron-down' viewBox='0 0 16 16'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") no-repeat right 1rem center/1rem 1rem;
  background-color: rgba(0, 0, 0, 0.1);
  border: 1px solid var(--surface-border);
  border-radius: 0.5rem;
  box-shadow: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

[data-theme="light"] .custom-select {
  background-color: rgba(255, 255, 255, 0.5);
}

.custom-select:focus {
  border-color: var(--accent-primary);
  outline: 0;
  box-shadow: var(--accent-glow);
}

.custom-select[multiple],
.custom-select[size]:not([size="1"]) {
  height: auto;
  padding-right: 1rem;
  background-image: none;
}

.custom-select:disabled {
  color: var(--text-secondary);
  background-color: rgba(0, 0, 0, 0.2);
  opacity: 0.5;
}

.custom-select::-ms-expand {
  display: none;
}


/* --- Custom File Input --- */
.custom-file {
  position: relative;
  display: inline-block;
  width: 100%;
  height: calc(1.5em + 1rem + 2px);
  margin-bottom: 0;
}

.custom-file-input {
  position: relative;
  z-index: 2;
  width: 100%;
  height: calc(1.5em + 1rem + 2px);
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.custom-file-label {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1;
  height: calc(1.5em + 1rem + 2px);
  padding: 0.5rem 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--text-secondary);
  background-color: rgba(0, 0, 0, 0.1);
  border: 1px solid var(--surface-border);
  border-radius: 0.5rem;
}

.custom-file-label::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  display: block;
  height: 100%;
  padding: 0.5rem 1rem;
  line-height: 1.5;
  color: var(--text-primary);
  content: "Browse";
  background-color: rgba(255, 255, 255, 0.1);
  border-left: inherit;
  border-radius: 0 0.5rem 0.5rem 0;
}

.custom-file-input:focus ~ .custom-file-label {
  border-color: var(--accent-primary);
  box-shadow: var(--accent-glow);
}

/* --- Custom Range Slider --- */
.custom-range {
  width: 100%;
  height: 1.4rem;
  padding: 0;
  background-color: transparent;
  -webkit-appearance: none;
  appearance: none;
}

.custom-range:focus {
  outline: none;
}

.custom-range:focus::-webkit-slider-thumb { box-shadow: var(--accent-glow); }
.custom-range:focus::-moz-range-thumb { box-shadow: var(--accent-glow); }
.custom-range:focus::-ms-thumb { box-shadow: var(--accent-glow); }

.custom-range::-webkit-slider-thumb {
  width: 1rem;
  height: 1rem;
  margin-top: -0.375rem;
  background-color: var(--accent-primary);
  border: 0;
  border-radius: 1rem;
  -webkit-appearance: none;
  appearance: none;
  transition: background-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.custom-range::-webkit-slider-runnable-track {
  width: 100%;
  height: 0.25rem;
  color: transparent;
  cursor: pointer;
  background-color: var(--surface-border);
  border-color: transparent;
  border-radius: 1rem;
}

.custom-range::-moz-range-thumb {
  width: 1rem;
  height: 1rem;
  background-color: var(--accent-primary);
  border: 0;
  border-radius: 1rem;
  -moz-appearance: none;
  appearance: none;
  transition: background-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.custom-range::-moz-range-track {
  width: 100%;
  height: 0.25rem;
  color: transparent;
  cursor: pointer;
  background-color: var(--surface-border);
  border-color: transparent;
  border-radius: 1rem;
}

.custom-range::-ms-thumb {
  width: 1rem;
  height: 1rem;
  margin-top: 0;
  margin-right: 0;
  margin-left: 0;
  background-color: var(--accent-primary);
  border: 0;
  border-radius: 1rem;
  appearance: none;
  transition: background-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.custom-range::-ms-track {
  width: 100%;
  height: 0.25rem;
  color: transparent;
  cursor: pointer;
  background-color: transparent;
  border-color: transparent;
  border-width: 0.5rem;
}

.custom-range::-ms-fill-lower {
  background-color: var(--surface-border);
  border-radius: 1rem;
}

.custom-range::-ms-fill-upper {
  background-color: var(--surface-border);
  border-radius: 1rem;
}

.custom-range:disabled::-webkit-slider-thumb { background-color: var(--text-secondary); opacity: 0.5; }
.custom-range:disabled::-moz-range-thumb { background-color: var(--text-secondary); opacity: 0.5; }
.custom-range:disabled::-ms-thumb { background-color: var(--text-secondary); opacity: 0.5; }

.custom-control-label::before,
.custom-file-label,
.custom-select {
  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
  .custom-control-label::before,
  .custom-file-label,
  .custom-select {
    transition: none;
  }
}

/* =================================================================================
   7. COMPONENT: NAVEGACIÓN (NAV, TABS, PILLS)
   Refactorizado para la estética Glassmorphism.
================================================================================= */

/* --- Estilo Base de Navegación --- */
.nav {
  display: flex;
  flex-wrap: wrap;
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
}

.nav-link {
  display: block;
  padding: 0.5rem 1rem;
  color: var(--text-secondary);
  transition: color 0.2s ease-in-out, text-shadow 0.2s ease-in-out;
}

.nav-link:hover,
.nav-link:focus {
  text-decoration: none;
  color: var(--text-primary);
}

.nav-link.disabled {
  color: var(--text-secondary);
  opacity: 0.5;
  pointer-events: none;
  cursor: default;
}


/* --- Navegación por Pestañas (Tabs) --- */
.nav-tabs {
  border-bottom: 1px solid var(--surface-border);
}

.nav-tabs .nav-item {
  margin-bottom: -1px; /* Compensa el borde del contenedor */
}

.nav-tabs .nav-link {
  border: 1px solid transparent;
  border-top-left-radius: 0.5rem;
  border-top-right-radius: 0.5rem;
  padding-bottom: 1rem; /* Más espacio para el indicador */
  transition: all 0.2s ease-in-out;
}

.nav-tabs .nav-link:hover,
.nav-tabs .nav-link:focus {
  border-color: transparent; /* No queremos bordes al hacer hover */
}

.nav-tabs .nav-link.disabled {
  color: var(--text-secondary);
  background-color: transparent;
  border-color: transparent;
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
  color: var(--accent-primary);
  background-color: transparent;
  border-color: transparent;
  border-bottom: 2px solid var(--accent-primary); /* Indicador activo */
  text-shadow: var(--accent-glow);
}

.nav-tabs .dropdown-menu {
  margin-top: -1px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}


/* --- Navegación en Píldoras (Pills) --- */
.nav-pills .nav-link {
  border-radius: 0.75rem; /* Bordes más redondeados */
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  color: var(--text-primary);
  /* Fondo translúcido con el color de acento */
  background-color: rgb(240 117 48 / 10%);
  box-shadow: 0 0 10px rgb(240 48 48 / 20%);
}

[data-theme="light"] .nav-pills .nav-link.active,
[data-theme="light"] .nav-pills .show > .nav-link {
  color: #fff;
  background-color: var(--accent-primary);
  box-shadow: var(--accent-glow);
}


/* --- Modificadores de Relleno y Justificación --- */
.nav-fill .nav-item {
  flex: 1 1 auto;
  text-align: center;
}

.nav-justified .nav-item {
  flex-basis: 0;
  flex-grow: 1;
  text-align: center;
}


/* --- Contenido de las Pestañas --- */
.tab-content > .tab-pane {
  display: none;
  padding: 1.5rem 0;
}

.tab-content > .active {
  display: block;
}

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1050; /* Nivel intermedio: Sobre el Context Sidebar, bajo el Rail Global */
  height: var(--navbar-height); /* Altura fija definida en :root (64px) */
  
  /* --- Glassmorphism --- */
  background-color: rgba(20, 20, 22, 0.7) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  
  border: 0 !important;
  border-bottom: 1px solid var(--surface-border) !important; /* Borde inferior sutil */
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1) !important;
  
  padding: 0 1.5rem; /* Padding ajustado para altura fija */
  display: flex;
  flex-wrap: nowrap; /* Evita que el contenido baje en altura fija */
  align-items: center;
  justify-content: space-between;
  transition: all 0.3s ease-in-out;
}

.navbar>.container,
.navbar>.container-fluid {
  display: flex;
  flex-wrap: inherit;
  align-items: center;
  justify-content: space-between;
  height: 100%; /* Ocupa toda la altura del navbar */
}

.navbar-brand {
  display: flex;
  align-items: center;
  padding-top: 0;
  padding-bottom: 0;
  margin-right: 1rem;
  font-size: 1.125rem;
  line-height: inherit;
  white-space: nowrap;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--text-primary) !important;
}

.navbar-brand:hover,
.navbar-brand:focus {
  text-decoration: none;
  color: var(--accent-primary) !important;
}

.navbar-nav {
  display: flex;
  flex-direction: column;
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
}

.navbar-nav .nav-link {
  padding-right: 0;
  padding-left: 0;
  color: var(--text-secondary);
  font-weight: 500;
  transition: color 0.2s ease;
}

.navbar-nav .nav-link:hover {
  color: var(--text-primary);
}

.navbar-nav .dropdown-menu {
  position: static;
  float: none;
}

.navbar-text {
  display: inline-block;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  color: var(--text-secondary);
}

.navbar-collapse {
  flex-basis: 100%;
  flex-grow: 1;
  align-items: center;
  background-color: transparent; /* Asegura que no haya fondos sólidos bloqueando el glass */
}

.navbar-toggler {
  padding: 0.25rem 0.75rem;
  font-size: 1.25rem;
  line-height: 1;
  background-color: transparent;
  border: 1px solid transparent;
  border-radius: 0.25rem;
  color: var(--text-primary);
}

.navbar-toggler:hover,
.navbar-toggler:focus {
  text-decoration: none;
}

.navbar-toggler-icon {
  display: inline-block;
  width: 1.5em;
  height: 1.5em;
  vertical-align: middle;
  content: "";
  background: no-repeat center center;
  background-size: 100% 100%;
}

/* --- Responsive Expand Classes --- */
/* ==========================================================================
   NAVBAR RESPONSIVE & TOGGLE FIXES
   ========================================================================== */

/* --- Small Devices (Landscape phones, 576px and up) --- */
@media (max-width: 575.98px) {
  .navbar-expand-sm>.container,
  .navbar-expand-sm>.container-fluid {
    padding-right: 0;
    padding-left: 0;
  }
}

@media (min-width: 576px) {
  .navbar-expand-sm {
    flex-flow: row nowrap;
    justify-content: flex-start;
  }
  .navbar-expand-sm .navbar-nav {
    flex-direction: row;
  }
  .navbar-expand-sm .navbar-nav .dropdown-menu {
    position: absolute;
  }
  .navbar-expand-sm .navbar-nav .nav-link {
    padding-right: 1rem;
    padding-left: 1rem;
  }
  .navbar-expand-sm>.container,
  .navbar-expand-sm>.container-fluid {
    flex-wrap: nowrap;
  }
  .navbar-expand-sm .navbar-collapse {
    display: flex !important;
    flex-basis: auto;
  }
  .navbar-expand-sm .navbar-toggler {
    display: none;
  }
}

/* --- Medium Devices (Tablets, 768px and up) --- */
@media (max-width: 767.98px) {
  .navbar-expand-md>.container,
  .navbar-expand-md>.container-fluid {
    padding-right: 0;
    padding-left: 0;
  }
  /* Ajuste Glassmorphism para menú móvil */
  .navbar-collapse {
    background-color: rgba(20, 20, 22, 0.95);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    position: absolute;
    top: var(--navbar-height);
    left: 0;
    right: 0;
    padding: 1rem;
    border-bottom: 1px solid var(--surface-border);
    z-index: 1050;
  }
}

@media (min-width: 768px) {
  .navbar-expand-md {
    flex-flow: row nowrap;
    justify-content: flex-start;
  }
  .navbar-expand-md .navbar-nav {
    flex-direction: row;
  }
  .navbar-expand-md .navbar-nav .dropdown-menu {
    position: absolute;
  }
  .navbar-expand-md .navbar-nav .nav-link {
    padding-right: 1rem;
    padding-left: 1rem;
  }
  .navbar-expand-md>.container,
  .navbar-expand-md>.container-fluid {
    flex-wrap: nowrap;
  }
  .navbar-expand-md .navbar-collapse {
    display: flex !important;
    flex-basis: auto;
    background-color: transparent;
    position: static;
    padding: 0;
    border-bottom: none;
  }
  .navbar-expand-md .navbar-toggler {
    display: none;
  }
}

/* --- Large Devices (Desktops, 992px and up) --- */
@media (max-width: 991.98px) {
  .navbar-expand-lg>.container,
  .navbar-expand-lg>.container-fluid {
    padding-right: 0;
    padding-left: 0;
  }
  /* Ajuste Glassmorphism para menú móvil */
  .navbar-collapse {
    background-color: rgba(20, 20, 22, 0.95);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    position: absolute;
    top: var(--navbar-height);
    left: 0;
    right: 0;
    padding: 1rem;
    border-bottom: 1px solid var(--surface-border);
    max-height: calc(100vh - var(--navbar-height));
    overflow-y: auto;
    z-index: 1050;
  }
}

@media (min-width: 992px) {
  .navbar-expand-lg {
    flex-flow: row nowrap;
    justify-content: flex-start;
  }
  .navbar-expand-lg .navbar-nav {
    flex-direction: row;
  }
  .navbar-expand-lg .navbar-nav .dropdown-menu {
    position: absolute;
  }
  .navbar-expand-lg .navbar-nav .nav-link {
    padding-right: 1rem;
    padding-left: 1rem;
  }
  .navbar-expand-lg>.container,
  .navbar-expand-lg>.container-fluid {
    flex-wrap: nowrap;
  }
  .navbar-expand-lg .navbar-collapse {
    display: flex !important;
    flex-basis: auto;
    background-color: transparent;
    position: static;
    padding: 0;
    border-bottom: none;
  }
  
  /* --- CORRECCIÓN DE VISIBILIDAD DEL BOTÓN SIDEBAR --- */
  /* Ocultamos el toggler genérico de Bootstrap */
  .navbar-expand-lg .navbar-toggler {
    display: none;
  }
  /* FORZAMOS la visualización del botón específico del Sidebar General */
  .navbar-expand-lg .navbar-toggler#toggleGeneralSidebar {
    display: inline-block !important;
    margin-right: 1rem;
  }
}

/* --- Extra Large Devices (Large Desktops, 1200px and up) --- */
@media (max-width: 1199.98px) {
  .navbar-expand-xl>.container,
  .navbar-expand-xl>.container-fluid {
    padding-right: 0;
    padding-left: 0;
  }
}

@media (min-width: 1200px) {
  .navbar-expand-xl {
    flex-flow: row nowrap;
    justify-content: flex-start;
  }
  .navbar-expand-xl .navbar-nav {
    flex-direction: row;
  }
  .navbar-expand-xl .navbar-nav .dropdown-menu {
    position: absolute;
  }
  .navbar-expand-xl .navbar-nav .nav-link {
    padding-right: 1rem;
    padding-left: 1rem;
  }
  .navbar-expand-xl>.container,
  .navbar-expand-xl>.container-fluid {
    flex-wrap: nowrap;
  }
  .navbar-expand-xl .navbar-collapse {
    display: flex !important;
    flex-basis: auto;
  }
  .navbar-expand-xl .navbar-toggler {
    display: none;
  }
  /* FORZAMOS la visualización también en pantallas muy grandes */
  .navbar-expand-xl .navbar-toggler#toggleGeneralSidebar {
    display: inline-block !important;
    margin-right: 1rem;
  }
}

/* --- Clases Genéricas de Expansión --- */
.navbar-expand {
  flex-flow: row nowrap;
  justify-content: flex-start;
}
.navbar-expand>.container,
.navbar-expand>.container-fluid {
  padding-right: 0;
  padding-left: 0;
}
.navbar-expand .navbar-nav {
  flex-direction: row;
}
.navbar-expand .navbar-nav .dropdown-menu {
  position: absolute;
}
.navbar-expand .navbar-nav .nav-link {
  padding-right: 1rem;
  padding-left: 1rem;
}
.navbar-expand>.container,
.navbar-expand>.container-fluid {
  flex-wrap: nowrap;
}
.navbar-expand .navbar-collapse {
  display: flex !important;
  flex-basis: auto;
}
.navbar-expand .navbar-toggler {
  display: none;
}



#toggleGeneralSidebar:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

[data-theme="light"] #toggleGeneralSidebar:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

#toggleGeneralSidebar .navbar-toggler-bar {
    background: var(--text-primary) !important;
    display: block;
    width: 22px;
    height: 2px; /* Barras un poco más visibles */
    border-radius: 1px;
    margin: 4px auto 0;
}

/* --- Theme Specific Overrides (Navbar Light/Dark) --- */

.navbar-light .navbar-brand { color: var(--text-primary); }
.navbar-light .navbar-brand:hover, .navbar-light .navbar-brand:focus { color: var(--accent-primary); }
.navbar-light .navbar-nav .nav-link { color: var(--text-secondary); }
.navbar-light .navbar-nav .nav-link:hover, .navbar-light .navbar-nav .nav-link:focus { color: var(--text-primary); }
.navbar-light .navbar-nav .nav-link.disabled { color: rgba(34, 42, 66, 0.3); }
.navbar-light .navbar-nav .show>.nav-link,
.navbar-light .navbar-nav .active>.nav-link,
.navbar-light .navbar-nav .nav-link.show,
.navbar-light .navbar-nav .nav-link.active { color: var(--accent-primary); }
.navbar-light .navbar-toggler { color: var(--text-secondary); border-color: transparent; }
.navbar-light .navbar-text { color: var(--text-secondary); }
.navbar-light .navbar-text a { color: var(--text-primary); }
.navbar-light .navbar-text a:hover, .navbar-light .navbar-text a:focus { color: var(--accent-primary); }

.navbar-dark .navbar-brand { color: var(--text-primary); }
.navbar-dark .navbar-brand:hover, .navbar-dark .navbar-brand:focus { color: var(--text-primary); }
.navbar-dark .navbar-nav .nav-link { color: var(--text-primary); }
.navbar-dark .navbar-nav .nav-link:hover, .navbar-dark .navbar-nav .nav-link:focus { color: var(--text-primary); }
.navbar-dark .navbar-nav .nav-link.disabled { color: rgba(255, 255, 255, 0.25); }
.navbar-dark .navbar-nav .show>.nav-link,
.navbar-dark .navbar-nav .active>.nav-link,
.navbar-dark .navbar-nav .nav-link.show,
.navbar-dark .navbar-nav .nav-link.active { color: var(--text-primary); }
.navbar-dark .navbar-toggler { color: var(--text-primary); border-color: transparent; }
.navbar-dark .navbar-text { color: var(--text-primary); }
.navbar-dark .navbar-text a { color: var(--text-secondary); }
.navbar-dark .navbar-text a:hover, .navbar-dark .navbar-text a:focus { color: var(--text-primary); }


/* --- WORKSPACE SELECTOR (Pill Style) --- */
.navbar .dropdown .dropdown-toggle.nav-link {
    display: flex;
    align-items: center;
    background-color: rgba(255, 255, 255, 0.08); 
    padding: 6px 15px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.2s ease;
}

.navbar .dropdown .dropdown-toggle.nav-link:hover {
    background-color: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
    transform: translateY(0); 
}

.navbar .dropdown .dropdown-toggle.nav-link span {
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0.3px;
    max-width: 150px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.navbar .dropdown .dropdown-toggle.nav-link .caret {
    position: static; 
    margin-left: 10px;
    margin-top: 0;
    border-top-color: var(--text-secondary);
}

[data-theme="light"] .navbar .dropdown .dropdown-toggle.nav-link {
    background-color: rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.1);
    color: #333;
}
[data-theme="light"] .navbar .dropdown .dropdown-toggle.nav-link:hover {
    background-color: rgba(0, 0, 0, 0.1);
}
[data-theme="light"] .navbar .dropdown .dropdown-toggle.nav-link .caret {
    border-top-color: #555;
}

/* =================================================================================
   8. COMPONENT: TARJETAS (CARDS)
   Rediseñado completamente para el efecto Glassmorphism.
================================================================================= */

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  
  /* --- EFECTO GLASSMORPHISM --- */
  background-color: var(--surface-color);         /* Fondo semitransparente */
  backdrop-filter: blur(20px);                     /* Desenfoque del fondo */
  -webkit-backdrop-filter: blur(20px);             /* Compatibilidad con Safari */
  border: 1px solid var(--surface-border);         /* Borde iluminado sutil */
  box-shadow: 0 8px 32px 0 var(--shadow-color);    /* Sombra para dar profundidad */
  border-radius: 1rem;                             /* Bordes suavizados */
}

.card > hr {
  margin-right: 0;
  margin-left: 0;
  border-top: 1px solid var(--surface-border);
}

.card > .list-group:first-child .list-group-item:first-child {
  border-top-left-radius: 1rem;
  border-top-right-radius: 1rem;
}

.card > .list-group:last-child .list-group-item:last-child {
  border-bottom-right-radius: 1rem;
  border-bottom-left-radius: 1rem;
}

.card-body {
  flex: 1 1 auto;
  padding: 1.5rem;
}

.card-title {
  margin-bottom: 1.25rem;
  color: var(--text-primary);
  font-weight: 700;
}

.card-subtitle {
  margin-top: -0.625rem;
  margin-bottom: 0;
  color: var(--text-secondary);
}

.card-text {
  color: var(--text-secondary);
}

.card-text:last-child {
  margin-bottom: 0;
}

.card-link {
  color: var(--accent-primary);
}

.card-link:hover {
  color: var(--accent-primary-hover);
  text-decoration: none;
}

.card-link + .card-link {
  margin-left: 1.5rem;
}

.card-header {
  padding: 1.25rem 1.5rem;
  margin-bottom: 0;
  background-color: transparent; /* Fondo transparente */
  border-bottom: 1px solid var(--surface-border); /* Borde sutil */
}

.card-header:first-child {
  border-radius: 1rem 1rem 0 0;
}

.card-header + .list-group .list-group-item:first-child {
  border-top: 0;
}

.card-footer {
  padding: 1.25rem 1.5rem;
  background-color: transparent; /* Fondo transparente */
  border-top: 1px solid var(--surface-border); /* Borde sutil */
}

.card-footer:last-child {
  border-radius: 0 0 1rem 1rem;
}

.card-header-tabs {
  margin-right: -0.75rem;
  margin-bottom: -1.25rem;
  margin-left: -0.75rem;
  border-bottom: 0;
}

.card-header-pills {
  margin-right: -0.75rem;
  margin-left: -0.75rem;
}

.card-img-overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 1.25rem;
  border-radius: 1rem; /* Asegurar que el overlay coincida con el radio de la tarjeta */
}

.card-img {
  width: 100%;
  border-radius: 1rem;
}

.card-img-top {
  width: 100%;
  border-top-left-radius: 1rem;
  border-top-right-radius: 1rem;
}

.card-img-bottom {
  width: 100%;
  border-bottom-right-radius: 1rem;
  border-bottom-left-radius: 1rem;
}

/* --- Estructuras de Grupo de Tarjetas (Sin cambios de lógica) --- */

.card-deck {
  display: flex;
  flex-direction: column;
}

.card-deck .card {
  margin-bottom: 15px;
}

@media (min-width: 576px) {
  .card-deck {
    flex-flow: row wrap;
    margin-right: -15px;
    margin-left: -15px;
  }
  .card-deck .card {
    display: flex;
    flex: 1 0 0%;
    flex-direction: column;
    margin-right: 15px;
    margin-bottom: 0;
    margin-left: 15px;
  }
}

.card-group {
  display: flex;
  flex-direction: column;
}

.card-group > .card {
  margin-bottom: 15px;
}

@media (min-width: 576px) {
  .card-group {
    flex-flow: row wrap;
  }

  .card-group>.card {
    flex: 1 0 0%;
    margin-bottom: 0;
  }

  .card-group>.card+.card {
    margin-left: 0;
    border-left: 0;
  }

  .card-group>.card:not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }

  .card-group>.card:not(:last-child) .card-img-top,
  .card-group>.card:not(:last-child) .card-header {
    border-top-right-radius: 0;
  }

  .card-group>.card:not(:last-child) .card-img-bottom,
  .card-group>.card:not(:last-child) .card-footer {
    border-bottom-right-radius: 0;
  }

  .card-group>.card:not(:first-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }

  .card-group>.card:not(:first-child) .card-img-top,
  .card-group>.card:not(:first-child) .card-header {
    border-top-left-radius: 0;
  }

  .card-group>.card:not(:first-child) .card-img-bottom,
  .card-group>.card:not(:first-child) .card-footer {
    border-bottom-left-radius: 0;
  }
}

.card-columns .card {
  margin-bottom: 1.25rem;
}

@media (min-width: 576px) {
  .card-columns {
    column-count: 3;
    column-gap: 1.25rem;
    orphans: 1;
    widows: 1;
  }

  .card-columns .card {
    display: inline-block;
    width: 100%;
  }
}

.accordion>.card {
  overflow: hidden;
}

.accordion>.card:not(:first-of-type) .card-header:first-child {
  border-radius: 0;
}

.accordion>.card:not(:first-of-type):not(:last-of-type) {
  border-bottom: 0;
  border-radius: 0;
}

.accordion>.card:first-of-type {
  border-bottom: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.accordion>.card:last-of-type {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.accordion>.card .card-header {
  margin-bottom: -0.0625rem;
}

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
  list-style: none;
  background-color: #1d253b;
  border-radius: 0.25rem;
}

.breadcrumb-item+.breadcrumb-item {
  padding-left: 0.5rem;
}

.breadcrumb-item+.breadcrumb-item::before {
  display: inline-block;
  padding-right: 0.5rem;
  color: #ffffff;
  content: "/";
}

.breadcrumb-item+.breadcrumb-item:hover::before {
  text-decoration: underline;
}

.breadcrumb-item+.breadcrumb-item:hover::before {
  text-decoration: none;
}

.breadcrumb-item.active {
  color: #ffffff;
}

.pagination {
  display: flex;
  padding-left: 0;
  list-style: none;
  border-radius: 0.25rem;
}

.page-link {
  position: relative;
  display: block;
  padding: 0 0.6875rem;
  margin-left: -0.0625rem;
  line-height: 1.25;
  color: #ffffff;
  background-color: transparent;
  border: 0.0625rem solid #e3e3e3;
}

.page-link:hover {
  z-index: 2;
  color: #6c757d;
  text-decoration: none;
  background-color: #e3e3e3;
  border-color: #e3e3e3;
}

.page-link:focus {
  z-index: 2;
  outline: 0;
  box-shadow: none;
}

.page-item:first-child .page-link {
  margin-left: 0;
  border-top-left-radius: 0.25rem;
  border-bottom-left-radius: 0.25rem;
}

.page-item:last-child .page-link {
  border-top-right-radius: 0.25rem;
  border-bottom-right-radius: 0.25rem;
}

.page-item.active .page-link {
  z-index: 1;
  color: #ffffff;
  background-color: #e14eca;
  border-color: #e14eca;
}

.page-item.disabled .page-link {
  color: #6c757d;
  pointer-events: none;
  cursor: auto;
  background-color: transparent;
  border-color: #e3e3e3;
}

.pagination-lg .page-link {
  padding: 0.75rem 1.5rem;
  font-size: 0.99925rem;
  line-height: 1.625rem;
}

.pagination-lg .page-item:first-child .page-link {
  border-top-left-radius: 0.4285rem;
  border-bottom-left-radius: 0.4285rem;
}

.pagination-lg .page-item:last-child .page-link {
  border-top-right-radius: 0.4285rem;
  border-bottom-right-radius: 0.4285rem;
}

.pagination-sm .page-link {
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  line-height: 1.5;
}

.pagination-sm .page-item:first-child .page-link {
  border-top-left-radius: 0.2857rem;
  border-bottom-left-radius: 0.2857rem;
}

.pagination-sm .page-item:last-child .page-link {
  border-top-right-radius: 0.2857rem;
  border-bottom-right-radius: 0.2857rem;
}

.badge {
  display: inline-block;
  padding: 0.25rem 0.5rem;
  font-size: 0.62475rem;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: 0.25rem;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
  .badge {
    transition: none;
  }
}
/* =================================================================================
   9. COMPONENT: BADGES
   Refactorizado para la estética Glassmorphism con variantes semánticas.
================================================================================= */

/* --- Estilo Base del Badge (Equivalente a Secundario/Default) --- */
.badge {
  display: inline-block;
  padding: 0.35em 0.65em; /* Padding ajustado para mejor espaciado */
  font-size: 0.75em;
  font-weight: 600;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: 0.5rem; /* Bordes más redondeados */
  
  color: var(--text-primary);
  background-color: rgba(255, 255, 255, 0.1); /* Fondo sutil de vidrio */
  border: 1px solid var(--surface-border);
  
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

[data-theme="light"] .badge {
  background-color: rgba(0, 0, 0, 0.05);
}

a.badge:hover,
a.badge:focus {
  text-decoration: none;
  background-color: rgba(255, 255, 255, 0.2);
}

.badge:empty {
  display: none;
}

.btn .badge {
  position: relative;
  top: -1px;
}

.badge-pill {
  padding-right: 0.8em;
  padding-left: 0.8em;
  border-radius: 10rem;
}


/* --- Badge Primario (para estado activo, éxito, etc.) --- */
.badge-primary {
  color: #000; /* Texto oscuro para contraste */
  background-color: var(--accent-primary);
  border-color: var(--accent-primary);
  box-shadow: 0 0 10px rgba(48, 240, 192, 0.5);
}

a.badge-primary:hover,
a.badge-primary:focus {
  color: #000;
  background-color: var(--accent-primary-hover);
  border-color: var(--accent-primary-hover);
}

a.badge-primary:focus,
a.badge-primary.focus {
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(48, 240, 192, 0.5);
}

/* Redefinimos .badge-success para que use el estilo primario */
.badge-success {
  color: #000;
  background-color: var(--accent-primary);
  border-color: var(--accent-primary);
  box-shadow: 0 0 10px rgba(48, 240, 192, 0.5);
}

a.badge-success:hover,
a.badge-success:focus {
  color: #000;
  background-color: var(--accent-primary-hover);
}


/* --- Badge de Peligro / Marca --- */
.badge-danger {
  background-color: var(--accent-brand);
  border-color: var(--accent-brand);
  box-shadow: 0 0 10px rgba(229, 57, 53, 0.5);
}

a.badge-danger:hover,
a.badge-danger:focus {
  color: #ffffff;
  background-color: #ff5252;
  border-color: #ff5252;
}

a.badge-danger:focus,
a.badge-danger.focus {
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(229, 57, 53, 0.5);
}

/* 
  NOTA: Las variantes .badge-secondary, .badge-info, .badge-warning, .badge-light, .badge-dark, etc.,
  han sido eliminadas para simplificar el sistema de diseño.
  - Para un badge neutral, use la clase .badge sin modificadores.
  - Para éxito o información, .badge-primary es la opción recomendada.
  - Para alertas, .badge-danger.
  Esto promueve la consistencia visual en toda la aplicación. Si se necesita una variante
  específica por compatibilidad, se puede añadir aquí siguiendo el mismo patrón.
*/
.badge-secondary, .badge-default, .badge-dark {
  color: var(--text-primary);
  background-color: rgba(255, 255, 255, 0.1);
  border: 1px solid var(--surface-border);
}
[data-theme="light"] .badge-secondary, [data-theme="light"] .badge-default, [data-theme="light"] .badge-dark {
  background-color: rgba(0, 0, 0, 0.05);
}

.badge-info, .badge-warning {
  background-color: #ff8d72; /* Color de advertencia heredado, se puede ajustar a una variable */
  border-color: #ff8d72;
}

.badge-light {
    color: var(--text-primary);
    background-color: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.badge-white, .badge-neutral {
    color: var(--text-primary);
    background-color: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.9);
}

.badge-darker {
    color: #fff;
    background-color: #000;
    border: 1px solid #000;
}

.jumbotron {
  padding: 2rem 1rem;
  margin-bottom: 2rem;
  background-color: #e9ecef;
  border-radius: 0.4285rem;
}

@media (min-width: 576px) {
  .jumbotron {
    padding: 4rem 2rem;
  }
}

.jumbotron-fluid {
  padding-right: 0;
  padding-left: 0;
  border-radius: 0;
}
/* =================================================================================
   10. COMPONENT: ALERTAS (ALERTS)
   Rediseñado con fondos translúcidos y brillos sutiles.
================================================================================= */

.alert {
  position: relative;
  padding: 1rem 1.25rem;
  margin-bottom: 1rem;
  border: 1px solid var(--surface-border);
  border-radius: 0.75rem; /* Bordes más redondeados */
  color: #ffffff; /* Texto blanco para alto contraste */
}

.alert-heading {
  color: inherit;
  font-weight: 500;
}

.alert-link {
  font-weight: 700; /* Hacemos los enlaces más notorios */
  color: #ffffff;
}

.alert hr {
  border-top-color: rgba(255, 255, 255, 0.3);
}

.alert-dismissible {
  padding-right: 3.5rem;
}

.alert-dismissible .close {
  position: absolute;
  top: 0;
  right: 0;
  padding: 1rem 1.25rem;
  color: inherit;
  background-color: transparent;
  border: 0;
  opacity: 0.7;
  cursor: pointer;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  text-shadow: 0 1px 0 #000;
  transition: opacity 0.15s ease-in-out;
}

.alert-dismissible .close:hover {
  opacity: 1;
}

/* --- Alerta Primaria (Éxito / Información) --- */
.alert-primary {
  background-color: rgba(48, 240, 192, 0.2); /* Fondo de vidrio coloreado */
  border-color: rgba(48, 240, 192, 0.4);
  box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.1), 0 0 15px rgba(48, 240, 192, 0.3);
}
/* Re-asignamos .alert-success a la primaria para consistencia */
.alert-success {
  background-color: rgba(48, 240, 192, 0.2);
  border-color: rgba(48, 240, 192, 0.4);
  box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.1), 0 0 15px rgba(48, 240, 192, 0.3);
}
.alert-success hr { border-top-color: rgba(48, 240, 192, 0.5); }
.alert-success .alert-link { color: #fff; }


/* --- Alerta de Peligro / Marca --- */
.alert-danger {
  background-color: rgba(229, 57, 53, 0.2);
  border-color: rgba(229, 57, 53, 0.4);
  box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.1), 0 0 15px rgba(229, 57, 53, 0.3);
}
.alert-danger hr { border-top-color: rgba(229, 57, 53, 0.5); }
.alert-danger .alert-link { color: #fff; }


/* --- Alerta Secundaria (Neutral) --- */
.alert-secondary {
  background-color: var(--surface-color); /* Usa el mismo fondo que una tarjeta */
  border-color: var(--surface-border);
  color: var(--text-primary);
}
.alert-secondary hr { border-top-color: var(--surface-border); }
.alert-secondary .alert-link { color: var(--text-primary); }


/*
  NOTA: Las variantes .alert-info, .alert-warning, .alert-light, .alert-dark, etc.,
  se han consolidado para simplificar el sistema de diseño.
  - Para información y éxito, usa .alert-primary o .alert-success.
  - Para errores o advertencias importantes, usa .alert-danger.
  - Para notificaciones neutrales, usa .alert-secondary.
  Esto asegura un uso consistente y deliberado de las alertas.
*/
.alert-info {
  background-color: rgba(94, 114, 228, 0.2);
  border-color: rgba(94, 114, 228, 0.4);
  box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.1), 0 0 15px rgba(94, 114, 228, 0.3);
}
.alert-info hr { border-top-color: rgba(94, 114, 228, 0.5); }
.alert-info .alert-link { color: #fff; }

.alert-warning {
  background-color: rgba(251, 99, 64, 0.2);
  border-color: rgba(251, 99, 64, 0.4);
  box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.1), 0 0 15px rgba(251, 99, 64, 0.3);
}
.alert-warning hr { border-top-color: rgba(251, 99, 64, 0.5); }
.alert-warning .alert-link { color: #fff; }

.alert-light,
.alert-dark,
.alert-default,
.alert-white,
.alert-neutral,
.alert-darker {
  background-color: var(--surface-color);
  border-color: var(--surface-border);
  color: var(--text-primary);
}
.alert-light hr,
.alert-dark hr,
.alert-default hr,
.alert-white hr,
.alert-neutral hr,
.alert-darker hr {
    border-top-color: var(--surface-border);
}
.alert-light .alert-link,
.alert-dark .alert-link,
.alert-default .alert-link,
.alert-white .alert-link,
.alert-neutral .alert-link,
.alert-darker .alert-link {
    color: var(--text-primary);
}



@keyframes progress-bar-stripes {
  from {
    background-position: 0.5rem 0;
  }

  to {
    background-position: 0 0;
  }
}

.progress {
  display: flex;
  height: 0.5rem;
  overflow: hidden;
  font-size: 0.65625rem;
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 0.875rem;
  box-shadow: 0px 0px 0px 3px rgba(0, 0, 0, 0.3);
}

.progress-bar {
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: #ffffff;
  text-align: center;
  white-space: nowrap;
  background-color: #e14eca;
  transition: width 0.6s ease;
}

@media (prefers-reduced-motion: reduce) {
  .progress-bar {
    transition: none;
  }
}

.progress-bar-striped {
  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-size: 0.5rem 0.5rem;
}

.progress-bar-animated {
  animation: progress-bar-stripes 1s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .progress-bar-animated {
    animation: none;
  }
}

.media {
  display: flex;
  align-items: flex-start;
}

.media-body {
  flex: 1;
}

.list-group {
  display: flex;
  flex-direction: column;
  padding-left: 0;
  margin-bottom: 0;
}

.list-group-item-action {
  width: 100%;
  color: #525f7f;
  text-align: inherit;
}

.list-group-item-action:hover,
.list-group-item-action:focus {
  z-index: 1;
  color: #525f7f;
  text-decoration: none;
  background-color: #f6f9fc;
}

.list-group-item-action:active {
  color: #525f7f;
  background-color: #e9ecef;
}

.list-group-item {
  position: relative;
  display: block;
  padding: 1rem 1rem;
  margin-bottom: -0.0625rem;
  border: 0.0625rem solid #a7adb3;
}

.list-group-item:first-child {
  border-top-left-radius: 0.25rem;
  border-top-right-radius: 0.25rem;
}

.list-group-item:last-child {
  margin-bottom: 0;
  border-bottom-right-radius: 0.25rem;
  border-bottom-left-radius: 0.25rem;
}

.list-group-item.disabled,
.list-group-item:disabled {
  color: #6c757d;
  pointer-events: none;
  background-color: #ffffff;
}

.list-group-item.active {
  z-index: 2;
  color: #ffffff;
  background-color: #e14eca;
  border-color: #e14eca;
}

.list-group-horizontal {
  flex-direction: row;
}

.list-group-horizontal .list-group-item {
  margin-right: -0.0625rem;
  margin-bottom: 0;
}

.list-group-horizontal .list-group-item:first-child {
  border-top-left-radius: 0.25rem;
  border-bottom-left-radius: 0.25rem;
  border-top-right-radius: 0;
}

.list-group-horizontal .list-group-item:last-child {
  margin-right: 0;
  border-top-right-radius: 0.25rem;
  border-bottom-right-radius: 0.25rem;
  border-bottom-left-radius: 0;
}

@media (min-width: 576px) {
  .list-group-horizontal-sm {
    flex-direction: row;
  }

  .list-group-horizontal-sm .list-group-item {
    margin-right: -0.0625rem;
    margin-bottom: 0;
  }

  .list-group-horizontal-sm .list-group-item:first-child {
    border-top-left-radius: 0.25rem;
    border-bottom-left-radius: 0.25rem;
    border-top-right-radius: 0;
  }

  .list-group-horizontal-sm .list-group-item:last-child {
    margin-right: 0;
    border-top-right-radius: 0.25rem;
    border-bottom-right-radius: 0.25rem;
    border-bottom-left-radius: 0;
  }
}

@media (min-width: 768px) {
  .list-group-horizontal-md {
    flex-direction: row;
  }

  .list-group-horizontal-md .list-group-item {
    margin-right: -0.0625rem;
    margin-bottom: 0;
  }

  .list-group-horizontal-md .list-group-item:first-child {
    border-top-left-radius: 0.25rem;
    border-bottom-left-radius: 0.25rem;
    border-top-right-radius: 0;
  }

  .list-group-horizontal-md .list-group-item:last-child {
    margin-right: 0;
    border-top-right-radius: 0.25rem;
    border-bottom-right-radius: 0.25rem;
    border-bottom-left-radius: 0;
  }
}

@media (min-width: 992px) {
  .list-group-horizontal-lg {
    flex-direction: row;
  }

  .list-group-horizontal-lg .list-group-item {
    margin-right: -0.0625rem;
    margin-bottom: 0;
  }

  .list-group-horizontal-lg .list-group-item:first-child {
    border-top-left-radius: 0.25rem;
    border-bottom-left-radius: 0.25rem;
    border-top-right-radius: 0;
  }

  .list-group-horizontal-lg .list-group-item:last-child {
    margin-right: 0;
    border-top-right-radius: 0.25rem;
    border-bottom-right-radius: 0.25rem;
    border-bottom-left-radius: 0;
  }
}

@media (min-width: 1200px) {
  .list-group-horizontal-xl {
    flex-direction: row;
  }

  .list-group-horizontal-xl .list-group-item {
    margin-right: -0.0625rem;
    margin-bottom: 0;
  }

  .list-group-horizontal-xl .list-group-item:first-child {
    border-top-left-radius: 0.25rem;
    border-bottom-left-radius: 0.25rem;
    border-top-right-radius: 0;
  }

  .list-group-horizontal-xl .list-group-item:last-child {
    margin-right: 0;
    border-top-right-radius: 0.25rem;
    border-bottom-right-radius: 0.25rem;
    border-bottom-left-radius: 0;
  }
}

.list-group-flush .list-group-item {
  border-right: 0;
  border-left: 0;
  border-radius: 0;
}

.list-group-flush .list-group-item:last-child {
  margin-bottom: -0.0625rem;
}

.list-group-flush:first-child .list-group-item:first-child {
  border-top: 0;
}

.list-group-flush:last-child .list-group-item:last-child {
  margin-bottom: 0;
  border-bottom: 0;
}

.list-group-item-primary {
  color: #853d89;
  background-color: #f7cdf0;
}

.list-group-item-primary.list-group-item-action:hover,
.list-group-item-primary.list-group-item-action:focus {
  color: #853d89;
  background-color: #f3b7e9;
}

.list-group-item-primary.list-group-item-action.active {
  color: #ffffff;
  background-color: #853d89;
  border-color: #853d89;
}

.list-group-item-secondary {
  color: #8f94a0;
  background-color: #fcfcfd;
}

.list-group-item-secondary.list-group-item-action:hover,
.list-group-item-secondary.list-group-item-action:focus {
  color: #8f94a0;
  background-color: #ededf3;
}

.list-group-item-secondary.list-group-item-action.active {
  color: #ffffff;
  background-color: #8f94a0;
  border-color: #8f94a0;
}

.list-group-item-success {
  color: #109285;
  background-color: #b8fbee;
}

.list-group-item-success.list-group-item-action:hover,
.list-group-item-success.list-group-item-action:focus {
  color: #109285;
  background-color: #a0fae8;
}

.list-group-item-success.list-group-item-action.active {
  color: #ffffff;
  background-color: #109285;
  border-color: #109285;
}

.list-group-item-info {
  color: #1f5da1;
  background-color: #c0dffd;
}

.list-group-item-info.list-group-item-action:hover,
.list-group-item-info.list-group-item-action:focus {
  color: #1f5da1;
  background-color: #a7d2fc;
}

.list-group-item-info.list-group-item-action.active {
  color: #ffffff;
  background-color: #1f5da1;
  border-color: #1f5da1;
}

.list-group-item-warning {
  color: #955d5b;
  background-color: #ffdfd8;
}

.list-group-item-warning.list-group-item-action:hover,
.list-group-item-warning.list-group-item-action:focus {
  color: #955d5b;
  background-color: #ffcabf;
}

.list-group-item-warning.list-group-item-action.active {
  color: #ffffff;
  background-color: #955d5b;
  border-color: #955d5b;
}

.list-group-item-danger {
  color: #94456c;
  background-color: #fed2e1;
}

.list-group-item-danger.list-group-item-action:hover,
.list-group-item-danger.list-group-item-action:focus {
  color: #94456c;
  background-color: #fdb9d0;
}

.list-group-item-danger.list-group-item-action.active {
  color: #ffffff;
  background-color: #94456c;
  border-color: #94456c;
}

.list-group-item-light {
  color: #6a7282;
  background-color: #e8eaed;
}

.list-group-item-light.list-group-item-action:hover,
.list-group-item-light.list-group-item-action:focus {
  color: #6a7282;
  background-color: #dadde2;
}

.list-group-item-light.list-group-item-action.active {
  color: #ffffff;
  background-color: #6a7282;
  border-color: #6a7282;
}

.list-group-item-dark {
  color: #212735;
  background-color: #c1c2c3;
}

.list-group-item-dark.list-group-item-action:hover,
.list-group-item-dark.list-group-item-action:focus {
  color: #212735;
  background-color: #b4b5b6;
}

.list-group-item-dark.list-group-item-action.active {
  color: #ffffff;
  background-color: #212735;
  border-color: #212735;
}

.list-group-item-default {
  color: #2b395d;
  background-color: #c6cbd8;
}

.list-group-item-default.list-group-item-action:hover,
.list-group-item-default.list-group-item-action:focus {
  color: #2b395d;
  background-color: #b7bdce;
}

.list-group-item-default.list-group-item-action.active {
  color: #ffffff;
  background-color: #2b395d;
  border-color: #2b395d;
}

.list-group-item-white {
  color: #9599a4;
  background-color: white;
}

.list-group-item-white.list-group-item-action:hover,
.list-group-item-white.list-group-item-action:focus {
  color: #9599a4;
  background-color: #f2f2f2;
}

.list-group-item-white.list-group-item-action.active {
  color: #ffffff;
  background-color: #9599a4;
  border-color: #9599a4;
}

.list-group-item-neutral {
  color: #9599a4;
  background-color: white;
}

.list-group-item-neutral.list-group-item-action:hover,
.list-group-item-neutral.list-group-item-action:focus {
  color: #9599a4;
  background-color: #f2f2f2;
}

.list-group-item-neutral.list-group-item-action.active {
  color: #ffffff;
  background-color: #9599a4;
  border-color: #9599a4;
}

.list-group-item-darker {
  color: #101420;
  background-color: #b8b8b8;
}

.list-group-item-darker.list-group-item-action:hover,
.list-group-item-darker.list-group-item-action:focus {
  color: #101420;
  background-color: #ababab;
}

.list-group-item-darker.list-group-item-action.active {
  color: #ffffff;
  background-color: #101420;
  border-color: #101420;
}

.close {
  float: right;
  font-size: 1.3125rem;
  font-weight: 600;
  line-height: 1;
  color: rgba(0, 0, 0, 0.6);
  text-shadow: none;
  opacity: .5;
}

.close:hover {
  color: rgba(0, 0, 0, 0.6);
  text-decoration: none;
}

.close:not(:disabled):not(.disabled):hover,
.close:not(:disabled):not(.disabled):focus {
  opacity: .75;
}

button.close {
  padding: 0;
  background-color: transparent;
  border: 0;
  appearance: none;
}

a.close.disabled {
  pointer-events: none;
}
/* =================================================================================
   11. COMPONENT: MODALES (MODALS)
   Rediseñado con efecto Glassmorphism para el contenido y el fondo.
================================================================================= */

.modal-open {
  overflow: hidden;
}

.modal-open .modal {
  overflow-x: hidden;
  overflow-y: auto;
}

.modal {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1050;
  display: none;
  width: 100%;
  height: 100%;
  overflow: hidden;
  outline: 0;
}

.modal-dialog {
  position: relative;
  width: auto;
  margin: 0.5rem;
  pointer-events: none;
}

.modal.fade .modal-dialog {
  transition: transform 0.3s ease-out;
  transform: translate(0, -50px);
}

@media (prefers-reduced-motion: reduce) {
  .modal.fade .modal-dialog {
    transition: none;
  }
}

.modal.show .modal-dialog {
  transform: translate(0, 0); /* Animación de entrada desde el centro */
}

/* --- Fondo del Modal (Backdrop) --- */
.modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1040;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5); /* Fondo oscuro translúcido */
  backdrop-filter: blur(5px);           /* CLAVE: Desenfoque del fondo de la página */
  -webkit-backdrop-filter: blur(5px);
}

.modal-backdrop.fade {
  opacity: 0;
}

.modal-backdrop.show {
  opacity: 1;
}

/* --- Contenido del Modal --- */
.modal-content {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  pointer-events: auto;
  
  /* --- EFECTO GLASSMORPHISM --- */
  background-color: var(--surface-color);
  background-clip: padding-box;
  border: 1px solid var(--surface-border);
  border-radius: 1rem; /* Bordes más redondeados */
  box-shadow: 0 15px 35px var(--shadow-color), 0 5px 15px var(--shadow-color);
  outline: 0;
  color: var(--text-primary);
}

/* --- Secciones del Modal --- */
.modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 1.5rem;
  border-bottom: 1px solid var(--surface-border);
  border-top-left-radius: 1rem;
  border-top-right-radius: 1rem;
}

.modal-title {
  margin-bottom: 0;
  line-height: 1.5;
  color: var(--text-primary);
  font-weight: 500;
}

.modal-header .close {
  padding: 1rem;
  margin: -1rem -1rem -1rem auto;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  color: var(--text-secondary);
  text-shadow: none;
  opacity: 0.8;
  background-color: transparent;
  border: 0;
}
.modal-header .close:hover {
    color: var(--text-primary);
    opacity: 1;
}

.modal-body {
  position: relative;
  flex: 1 1 auto;
  padding: 1.5rem;
  color: var(--text-secondary);
}

.modal-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  padding: 1.25rem 1.5rem;
  border-top: 1px solid var(--surface-border);
  border-bottom-right-radius: 1rem;
  border-bottom-left-radius: 1rem;
}

.modal-footer > * {
  margin: 0.25rem;
}


/* --- Modal Centrado y con Scroll --- */
.modal-dialog-centered {
  display: flex;
  align-items: center;
  min-height: calc(100% - 1rem);
}
.modal-dialog-centered::before {
  display: block;
  height: calc(100vh - 1rem);
  content: "";
}

.modal-dialog-scrollable {
  display: flex;
  max-height: calc(100% - 1rem);
}
.modal-dialog-scrollable .modal-content {
  max-height: calc(100vh - 1rem);
  overflow: hidden;
}
.modal-dialog-scrollable .modal-header,
.modal-dialog-scrollable .modal-footer {
  flex-shrink: 0;
}
.modal-dialog-scrollable .modal-body {
  overflow-y: auto;
}

/* --- Tamaños de Modal y Media Queries --- */
.modal-scrollbar-measure {
  position: absolute;
  top: -9999px;
  width: 50px;
  height: 50px;
  overflow: scroll;
}

@media (min-width: 576px) {
  .modal-dialog {
    max-width: 500px;
    margin: 1.75rem auto;
  }
  .modal-dialog-scrollable {
    max-height: calc(100% - 3.5rem);
  }
  .modal-dialog-scrollable .modal-content {
    max-height: calc(100vh - 3.5rem);
  }
  .modal-dialog-centered {
    min-height: calc(100% - 3.5rem);
  }
  .modal-dialog-centered::before {
    height: calc(100vh - 3.5rem);
  }
  .modal-sm {
    max-width: 380px;
  }
}

@media (min-width: 992px) {
  .modal-lg,
  .modal-xl {
    max-width: 800px;
  }
}

@media (min-width: 1200px) {
  .modal-xl {
    max-width: 1140px;
  }
}

.tooltip {
  position: absolute;
  z-index: 1070;
  display: block;
  margin: 0;
  font-family: "Poppins", sans-serif;
  font-style: normal;
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
  text-align: start;
  text-decoration: none;
  text-shadow: none;
  text-transform: none;
  letter-spacing: normal;
  word-break: normal;
  word-spacing: normal;
  white-space: normal;
  line-break: auto;
  font-size: 0.75rem;
  word-wrap: break-word;
  opacity: 0;
}

.tooltip.show {
  opacity: 0.9;
}

.tooltip .arrow {
  position: absolute;
  display: block;
  width: 0.8rem;
  height: 0.4rem;
}

.tooltip .arrow::before {
  position: absolute;
  content: "";
  border-color: transparent;
  border-style: solid;
}

.bs-tooltip-top,
.bs-tooltip-auto[x-placement^="top"] {
  padding: 0.4rem 0;
}

.bs-tooltip-top .arrow,
.bs-tooltip-auto[x-placement^="top"] .arrow {
  bottom: 0;
}

.bs-tooltip-top .arrow::before,
.bs-tooltip-auto[x-placement^="top"] .arrow::before {
  top: 0;
  border-width: 0.4rem 0.4rem 0;
  border-top-color: #ffffff;
}

.bs-tooltip-right,
.bs-tooltip-auto[x-placement^="right"] {
  padding: 0 0.4rem;
}

.bs-tooltip-right .arrow,
.bs-tooltip-auto[x-placement^="right"] .arrow {
  left: 0;
  width: 0.4rem;
  height: 0.8rem;
}

.bs-tooltip-right .arrow::before,
.bs-tooltip-auto[x-placement^="right"] .arrow::before {
  right: 0;
  border-width: 0.4rem 0.4rem 0.4rem 0;
  border-right-color: #ffffff;
}

.bs-tooltip-bottom,
.bs-tooltip-auto[x-placement^="bottom"] {
  padding: 0.4rem 0;
}

.bs-tooltip-bottom .arrow,
.bs-tooltip-auto[x-placement^="bottom"] .arrow {
  top: 0;
}

.bs-tooltip-bottom .arrow::before,
.bs-tooltip-auto[x-placement^="bottom"] .arrow::before {
  bottom: 0;
  border-width: 0 0.4rem 0.4rem;
  border-bottom-color: #ffffff;
}

.bs-tooltip-left,
.bs-tooltip-auto[x-placement^="left"] {
  padding: 0 0.4rem;
}

.bs-tooltip-left .arrow,
.bs-tooltip-auto[x-placement^="left"] .arrow {
  right: 0;
  width: 0.4rem;
  height: 0.8rem;
}

.bs-tooltip-left .arrow::before,
.bs-tooltip-auto[x-placement^="left"] .arrow::before {
  left: 0;
  border-width: 0.4rem 0 0.4rem 0.4rem;
  border-left-color: #ffffff;
}

.tooltip-inner {
  max-width: 200px;
  padding: 0.25rem 0.5rem;
  color: #222a42;
  text-align: center;
  background-color: #ffffff;
  border-radius: 0.25rem;
}

.popover {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1060;
  display: block;
  max-width: 276px;
  font-family: "Poppins", sans-serif;
  font-style: normal;
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
  text-align: start;
  text-decoration: none;
  text-shadow: none;
  text-transform: none;
  letter-spacing: normal;
  word-break: normal;
  word-spacing: normal;
  white-space: normal;
  line-break: auto;
  font-size: 0.75rem;
  word-wrap: break-word;
  background-color: #ffffff;
  background-clip: padding-box;
  border: 1px solid rgba(34, 42, 66, 0.05);
  border-radius: 0.4285rem;
  box-shadow: 0px 0.5rem 2rem 0px rgba(34, 42, 66, 0.2);
}

.popover .arrow {
  position: absolute;
  display: block;
  width: 1.5rem;
  height: 0.75rem;
  margin: 0 0.4285rem;
}

.popover .arrow::before,
.popover .arrow::after {
  position: absolute;
  display: block;
  content: "";
  border-color: transparent;
  border-style: solid;
}

.bs-popover-top,
.bs-popover-auto[x-placement^="top"] {
  margin-bottom: 0.75rem;
}

.bs-popover-top>.arrow,
.bs-popover-auto[x-placement^="top"]>.arrow {
  bottom: calc((0.75rem + 1px) * -1);
}

.bs-popover-top>.arrow::before,
.bs-popover-auto[x-placement^="top"]>.arrow::before {
  bottom: 0;
  border-width: 0.75rem 0.75rem 0;
  border-top-color: transparent;
}

.bs-popover-top>.arrow::after,
.bs-popover-auto[x-placement^="top"]>.arrow::after {
  bottom: 1px;
  border-width: 0.75rem 0.75rem 0;
  border-top-color: #ffffff;
}

.bs-popover-right,
.bs-popover-auto[x-placement^="right"] {
  margin-left: 0.75rem;
}

.bs-popover-right>.arrow,
.bs-popover-auto[x-placement^="right"]>.arrow {
  left: calc((0.75rem + 1px) * -1);
  width: 0.75rem;
  height: 1.5rem;
  margin: 0.4285rem 0;
}

.bs-popover-right>.arrow::before,
.bs-popover-auto[x-placement^="right"]>.arrow::before {
  left: 0;
  border-width: 0.75rem 0.75rem 0.75rem 0;
  border-right-color: transparent;
}

.bs-popover-right>.arrow::after,
.bs-popover-auto[x-placement^="right"]>.arrow::after {
  left: 1px;
  border-width: 0.75rem 0.75rem 0.75rem 0;
  border-right-color: #ffffff;
}

.bs-popover-bottom,
.bs-popover-auto[x-placement^="bottom"] {
  margin-top: 0.75rem;
}

.bs-popover-bottom>.arrow,
.bs-popover-auto[x-placement^="bottom"]>.arrow {
  top: calc((0.75rem + 1px) * -1);
}

.bs-popover-bottom>.arrow::before,
.bs-popover-auto[x-placement^="bottom"]>.arrow::before {
  top: 0;
  border-width: 0 0.75rem 0.75rem 0.75rem;
  border-bottom-color: transparent;
}

.bs-popover-bottom>.arrow::after,
.bs-popover-auto[x-placement^="bottom"]>.arrow::after {
  top: 1px;
  border-width: 0 0.75rem 0.75rem 0.75rem;
  border-bottom-color: #ffffff;
}

.bs-popover-bottom .popover-header::before,
.bs-popover-auto[x-placement^="bottom"] .popover-header::before {
  position: absolute;
  top: 0;
  left: 50%;
  display: block;
  width: 1.5rem;
  margin-left: -0.75rem;
  content: "";
  border-bottom: 1px solid #ffffff;
}

.bs-popover-left,
.bs-popover-auto[x-placement^="left"] {
  margin-right: 0.75rem;
}

.bs-popover-left>.arrow,
.bs-popover-auto[x-placement^="left"]>.arrow {
  right: calc((0.75rem + 1px) * -1);
  width: 0.75rem;
  height: 1.5rem;
  margin: 0.4285rem 0;
}

.bs-popover-left>.arrow::before,
.bs-popover-auto[x-placement^="left"]>.arrow::before {
  right: 0;
  border-width: 0.75rem 0 0.75rem 0.75rem;
  border-left-color: transparent;
}

.bs-popover-left>.arrow::after,
.bs-popover-auto[x-placement^="left"]>.arrow::after {
  right: 1px;
  border-width: 0.75rem 0 0.75rem 0.75rem;
  border-left-color: #ffffff;
}

.popover-header {
  padding: 0.75rem 0.75rem;
  margin-bottom: 0;
  font-size: 0.875rem;
  color: #32325d;
  background-color: #ffffff;
  border-bottom: 1px solid #f2f2f2;
  border-top-left-radius: calc(0.4285rem - 1px);
  border-top-right-radius: calc(0.4285rem - 1px);
}

.popover-header:empty {
  display: none;
}

.popover-body {
  padding: 0.75rem 0.75rem;
  color: #525f7f;
}

.carousel {
  position: relative;
}

.carousel.pointer-event {
  touch-action: pan-y;
}

.carousel-inner {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.carousel-inner::after {
  display: block;
  clear: both;
  content: "";
}

.carousel-item {
  position: relative;
  display: none;
  float: left;
  width: 100%;
  margin-right: -100%;
  backface-visibility: hidden;
  transition: transform 0.6s ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
  .carousel-item {
    transition: none;
  }
}

.carousel-item.active,
.carousel-item-next,
.carousel-item-prev {
  display: block;
}

.carousel-item-next:not(.carousel-item-left),
.active.carousel-item-right {
  transform: translateX(100%);
}

.carousel-item-prev:not(.carousel-item-right),
.active.carousel-item-left {
  transform: translateX(-100%);
}

.carousel-fade .carousel-item {
  opacity: 0;
  transition-property: opacity;
  transform: none;
}

.carousel-fade .carousel-item.active,
.carousel-fade .carousel-item-next.carousel-item-left,
.carousel-fade .carousel-item-prev.carousel-item-right {
  z-index: 1;
  opacity: 1;
}

.carousel-fade .active.carousel-item-left,
.carousel-fade .active.carousel-item-right {
  z-index: 0;
  opacity: 0;
  transition: 0s 0.6s opacity;
}

@media (prefers-reduced-motion: reduce) {

  .carousel-fade .active.carousel-item-left,
  .carousel-fade .active.carousel-item-right {
    transition: none;
  }
}

.carousel-control-prev,
.carousel-control-next {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 15%;
  color: #ffffff;
  text-align: center;
  opacity: 0.5;
  transition: opacity 0.15s ease;
}

@media (prefers-reduced-motion: reduce) {

  .carousel-control-prev,
  .carousel-control-next {
    transition: none;
  }
}

.carousel-control-prev:hover,
.carousel-control-prev:focus,
.carousel-control-next:hover,
.carousel-control-next:focus {
  color: #ffffff;
  text-decoration: none;
  outline: 0;
  opacity: 0.9;
}

.carousel-control-prev {
  left: 0;
}

.carousel-control-next {
  right: 0;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  background: no-repeat 50% / 100% 100%;
}

.carousel-control-prev-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23ffffff' viewBox='0 0 8 8'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3e%3c/svg%3e");
}

.carousel-control-next-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23ffffff' viewBox='0 0 8 8'%3e%3cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3e%3c/svg%3e");
}

.carousel-indicators {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 15;
  display: flex;
  justify-content: center;
  padding-left: 0;
  margin-right: 15%;
  margin-left: 15%;
  list-style: none;
}

.carousel-indicators li {
  box-sizing: content-box;
  flex: 0 1 auto;
  width: 30px;
  height: 3px;
  margin-right: 3px;
  margin-left: 3px;
  text-indent: -999px;
  cursor: pointer;
  background-color: #ffffff;
  background-clip: padding-box;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  opacity: .5;
  transition: opacity 0.6s ease;
}

@media (prefers-reduced-motion: reduce) {
  .carousel-indicators li {
    transition: none;
  }
}

.carousel-indicators .active {
  opacity: 1;
}

.carousel-caption {
  position: absolute;
  right: 15%;
  bottom: 20px;
  left: 15%;
  z-index: 10;
  padding-top: 20px;
  padding-bottom: 20px;
  color: #ffffff;
  text-align: center;
}

.align-baseline {
  vertical-align: baseline !important;
}

.align-top {
  vertical-align: top !important;
}

.align-middle {
  vertical-align: middle !important;
}

.align-bottom {
  vertical-align: bottom !important;
}

.align-text-bottom {
  vertical-align: text-bottom !important;
}

.align-text-top {
  vertical-align: text-top !important;
}
/* =================================================================================
   12. CLASES DE UTILIDAD (UTILITIES)
   Refactorizadas para usar Design Tokens y alinearse con la nueva estética.
================================================================================= */

/* --- Utilidades de Fondo (Backgrounds) --- */

.bg-primary {
  background-color: var(--accent-primary) !important;
}

a.bg-primary:hover,
a.bg-primary:focus,
button.bg-primary:hover,
button.bg-primary:focus {
  background-color: var(--accent-primary-hover) !important;
}

.bg-danger {
  background-color: var(--accent-brand) !important;
}

a.bg-danger:hover,
a.bg-danger:focus,
button.bg-danger:hover,
button.bg-danger:focus {
  background-color: #ff5252 !important; /* Un rojo más brillante para hover */
}

/* NUEVA UTILIDAD: Fondo de superficie de vidrio */
.bg-surface {
  background-color: var(--surface-color) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.bg-transparent {
  background-color: transparent !important;
}

/*
  NOTA: Se han simplificado las utilidades de color. En lugar de una clase por cada color,
  se priorizan las clases semánticas. Si se necesita una utilidad de fondo específica,
  se puede añadir aquí siguiendo el patrón de variables.
  Ejemplo: .bg-success se mapea a .bg-primary
*/
.bg-success {
  background-color: var(--accent-primary) !important;
}

.bg-secondary,
.bg-light,
.bg-dark,
.bg-default,
.bg-darker {
  background-color: var(--surface-color) !important; 
}

.bg-white,
.bg-neutral {
  background-color: var(--surface-color) !important;
}

/* --- Utilidades de Borde (Borders) --- */

.border {
  border: 1px solid var(--surface-border) !important;
}

.border-top {
  border-top: 1px solid var(--surface-border) !important;
}

.border-right {
  border-right: 1px solid var(--surface-border) !important;
}

.border-bottom {
  border-bottom: 1px solid var(--surface-border) !important;
}

.border-left {
  border-left: 1px solid var(--surface-border) !important;
}

.border-0 { border: 0 !important; }
.border-top-0 { border-top: 0 !important; }
.border-right-0 { border-right: 0 !important; }
.border-bottom-0 { border-bottom: 0 !important; }
.border-left-0 { border-left: 0 !important; }

.border-primary {
  border-color: var(--accent-primary) !important;
}

.border-danger {
  border-color: var(--accent-brand) !important;
}

/* 
  NOTA: Al igual que con los fondos, las variantes de color de borde se han simplificado.
  Las siguientes clases se mapean a las variables principales para mantener la consistencia.
*/

.border-success {
  border-color: var(--accent-primary) !important;
}

.border-secondary,
.border-light,
.border-dark,
.border-default,
.border-darker {
  border-color: var(--surface-border) !important;
}

.border-info {
  border-color: var(--accent-secondary) !important; /* Usando el acento secundario para 'info' */
}

.border-warning {
  border-color: #ff8d72 !important; /* Se mantiene un color específico para 'warning' si es necesario */
}

.border-white,
.border-neutral {
  border-color: #ffffff !important;
}

.rounded-sm {
  border-radius: 0.2857rem !important;
}

.rounded {
  border-radius: 0.25rem !important;
}

.rounded-top {
  border-top-left-radius: 0.25rem !important;
  border-top-right-radius: 0.25rem !important;
}

.rounded-right {
  border-top-right-radius: 0.25rem !important;
  border-bottom-right-radius: 0.25rem !important;
}

.rounded-bottom {
  border-bottom-right-radius: 0.25rem !important;
  border-bottom-left-radius: 0.25rem !important;
}

.rounded-left {
  border-top-left-radius: 0.25rem !important;
  border-bottom-left-radius: 0.25rem !important;
}

.rounded-lg {
  border-radius: 0.4285rem !important;
}

.rounded-circle {
  border-radius: 50% !important;
}

.rounded-pill {
  border-radius: 50rem !important;
}

.rounded-0 {
  border-radius: 0 !important;
}

.clearfix::after {
  display: block;
  clear: both;
  content: "";
}

.d-none {
  display: none !important;
}

.d-inline {
  display: inline !important;
}

.d-inline-block {
  display: inline-block !important;
}

.d-block {
  display: block !important;
}

.d-table {
  display: table !important;
}

.d-table-row {
  display: table-row !important;
}

.d-table-cell {
  display: table-cell !important;
}

.d-flex {
  display: flex !important;
}

.d-inline-flex {
  display: inline-flex !important;
}

@media (min-width: 576px) {
  .d-sm-none {
    display: none !important;
  }

  .d-sm-inline {
    display: inline !important;
  }

  .d-sm-inline-block {
    display: inline-block !important;
  }

  .d-sm-block {
    display: block !important;
  }

  .d-sm-table {
    display: table !important;
  }

  .d-sm-table-row {
    display: table-row !important;
  }

  .d-sm-table-cell {
    display: table-cell !important;
  }

  .d-sm-flex {
    display: flex !important;
  }

  .d-sm-inline-flex {
    display: inline-flex !important;
  }
}

@media (min-width: 768px) {
  .d-md-none {
    display: none !important;
  }

  .d-md-inline {
    display: inline !important;
  }

  .d-md-inline-block {
    display: inline-block !important;
  }

  .d-md-block {
    display: block !important;
  }

  .d-md-table {
    display: table !important;
  }

  .d-md-table-row {
    display: table-row !important;
  }

  .d-md-table-cell {
    display: table-cell !important;
  }

  .d-md-flex {
    display: flex !important;
  }

  .d-md-inline-flex {
    display: inline-flex !important;
  }
}

@media (min-width: 992px) {
  .d-lg-none {
    display: none !important;
  }

  .d-lg-inline {
    display: inline !important;
  }

  .d-lg-inline-block {
    display: inline-block !important;
  }

  .d-lg-block {
    display: block !important;
  }

  .d-lg-table {
    display: table !important;
  }

  .d-lg-table-row {
    display: table-row !important;
  }

  .d-lg-table-cell {
    display: table-cell !important;
  }

  .d-lg-flex {
    display: flex !important;
  }

  .d-lg-inline-flex {
    display: inline-flex !important;
  }
}

@media (min-width: 1200px) {
  .d-xl-none {
    display: none !important;
  }

  .d-xl-inline {
    display: inline !important;
  }

  .d-xl-inline-block {
    display: inline-block !important;
  }

  .d-xl-block {
    display: block !important;
  }

  .d-xl-table {
    display: table !important;
  }

  .d-xl-table-row {
    display: table-row !important;
  }

  .d-xl-table-cell {
    display: table-cell !important;
  }

  .d-xl-flex {
    display: flex !important;
  }

  .d-xl-inline-flex {
    display: inline-flex !important;
  }
}

@media print {
  .d-print-none {
    display: none !important;
  }

  .d-print-inline {
    display: inline !important;
  }

  .d-print-inline-block {
    display: inline-block !important;
  }

  .d-print-block {
    display: block !important;
  }

  .d-print-table {
    display: table !important;
  }

  .d-print-table-row {
    display: table-row !important;
  }

  .d-print-table-cell {
    display: table-cell !important;
  }

  .d-print-flex {
    display: flex !important;
  }

  .d-print-inline-flex {
    display: inline-flex !important;
  }
}

.embed-responsive {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  overflow: hidden;
}

.embed-responsive::before {
  display: block;
  content: "";
}

.embed-responsive .embed-responsive-item,
.embed-responsive iframe,
.embed-responsive embed,
.embed-responsive object,
.embed-responsive video {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.embed-responsive-21by9::before {
  padding-top: 42.857143%;
}

.embed-responsive-16by9::before {
  padding-top: 56.25%;
}

.embed-responsive-4by3::before {
  padding-top: 75%;
}

.embed-responsive-1by1::before {
  padding-top: 100%;
}

.flex-row {
  flex-direction: row !important;
}

.flex-column {
  flex-direction: column !important;
}

.flex-row-reverse {
  flex-direction: row-reverse !important;
}

.flex-column-reverse {
  flex-direction: column-reverse !important;
}

.flex-wrap {
  flex-wrap: wrap !important;
}

.flex-nowrap {
  flex-wrap: nowrap !important;
}

.flex-wrap-reverse {
  flex-wrap: wrap-reverse !important;
}

.flex-fill {
  flex: 1 1 auto !important;
}

.flex-grow-0 {
  flex-grow: 0 !important;
}

.flex-grow-1 {
  flex-grow: 1 !important;
}

.flex-shrink-0 {
  flex-shrink: 0 !important;
}

.flex-shrink-1 {
  flex-shrink: 1 !important;
}

.justify-content-start {
  justify-content: flex-start !important;
}

.justify-content-end {
  justify-content: flex-end !important;
}

.justify-content-center {
  justify-content: center !important;
}

.justify-content-between {
  justify-content: space-between !important;
}

.justify-content-around {
  justify-content: space-around !important;
}

.align-items-start {
  align-items: flex-start !important;
}

.align-items-end {
  align-items: flex-end !important;
}

.align-items-center {
  align-items: center !important;
}

.align-items-baseline {
  align-items: baseline !important;
}

.align-items-stretch {
  align-items: stretch !important;
}

.align-content-start {
  align-content: flex-start !important;
}

.align-content-end {
  align-content: flex-end !important;
}

.align-content-center {
  align-content: center !important;
}

.align-content-between {
  align-content: space-between !important;
}

.align-content-around {
  align-content: space-around !important;
}

.align-content-stretch {
  align-content: stretch !important;
}

.align-self-auto {
  align-self: auto !important;
}

.align-self-start {
  align-self: flex-start !important;
}

.align-self-end {
  align-self: flex-end !important;
}

.align-self-center {
  align-self: center !important;
}

.align-self-baseline {
  align-self: baseline !important;
}

.align-self-stretch {
  align-self: stretch !important;
}

@media (min-width: 576px) {
  .flex-sm-row {
    flex-direction: row !important;
  }

  .flex-sm-column {
    flex-direction: column !important;
  }

  .flex-sm-row-reverse {
    flex-direction: row-reverse !important;
  }

  .flex-sm-column-reverse {
    flex-direction: column-reverse !important;
  }

  .flex-sm-wrap {
    flex-wrap: wrap !important;
  }

  .flex-sm-nowrap {
    flex-wrap: nowrap !important;
  }

  .flex-sm-wrap-reverse {
    flex-wrap: wrap-reverse !important;
  }

  .flex-sm-fill {
    flex: 1 1 auto !important;
  }

  .flex-sm-grow-0 {
    flex-grow: 0 !important;
  }

  .flex-sm-grow-1 {
    flex-grow: 1 !important;
  }

  .flex-sm-shrink-0 {
    flex-shrink: 0 !important;
  }

  .flex-sm-shrink-1 {
    flex-shrink: 1 !important;
  }

  .justify-content-sm-start {
    justify-content: flex-start !important;
  }

  .justify-content-sm-end {
    justify-content: flex-end !important;
  }

  .justify-content-sm-center {
    justify-content: center !important;
  }

  .justify-content-sm-between {
    justify-content: space-between !important;
  }

  .justify-content-sm-around {
    justify-content: space-around !important;
  }

  .align-items-sm-start {
    align-items: flex-start !important;
  }

  .align-items-sm-end {
    align-items: flex-end !important;
  }

  .align-items-sm-center {
    align-items: center !important;
  }

  .align-items-sm-baseline {
    align-items: baseline !important;
  }

  .align-items-sm-stretch {
    align-items: stretch !important;
  }

  .align-content-sm-start {
    align-content: flex-start !important;
  }

  .align-content-sm-end {
    align-content: flex-end !important;
  }

  .align-content-sm-center {
    align-content: center !important;
  }

  .align-content-sm-between {
    align-content: space-between !important;
  }

  .align-content-sm-around {
    align-content: space-around !important;
  }

  .align-content-sm-stretch {
    align-content: stretch !important;
  }

  .align-self-sm-auto {
    align-self: auto !important;
  }

  .align-self-sm-start {
    align-self: flex-start !important;
  }

  .align-self-sm-end {
    align-self: flex-end !important;
  }

  .align-self-sm-center {
    align-self: center !important;
  }

  .align-self-sm-baseline {
    align-self: baseline !important;
  }

  .align-self-sm-stretch {
    align-self: stretch !important;
  }
}

@media (min-width: 768px) {
  .flex-md-row {
    flex-direction: row !important;
  }

  .flex-md-column {
    flex-direction: column !important;
  }

  .flex-md-row-reverse {
    flex-direction: row-reverse !important;
  }

  .flex-md-column-reverse {
    flex-direction: column-reverse !important;
  }

  .flex-md-wrap {
    flex-wrap: wrap !important;
  }

  .flex-md-nowrap {
    flex-wrap: nowrap !important;
  }

  .flex-md-wrap-reverse {
    flex-wrap: wrap-reverse !important;
  }

  .flex-md-fill {
    flex: 1 1 auto !important;
  }

  .flex-md-grow-0 {
    flex-grow: 0 !important;
  }

  .flex-md-grow-1 {
    flex-grow: 1 !important;
  }

  .flex-md-shrink-0 {
    flex-shrink: 0 !important;
  }

  .flex-md-shrink-1 {
    flex-shrink: 1 !important;
  }

  .justify-content-md-start {
    justify-content: flex-start !important;
  }

  .justify-content-md-end {
    justify-content: flex-end !important;
  }

  .justify-content-md-center {
    justify-content: center !important;
  }

  .justify-content-md-between {
    justify-content: space-between !important;
  }

  .justify-content-md-around {
    justify-content: space-around !important;
  }

  .align-items-md-start {
    align-items: flex-start !important;
  }

  .align-items-md-end {
    align-items: flex-end !important;
  }

  .align-items-md-center {
    align-items: center !important;
  }

  .align-items-md-baseline {
    align-items: baseline !important;
  }

  .align-items-md-stretch {
    align-items: stretch !important;
  }

  .align-content-md-start {
    align-content: flex-start !important;
  }

  .align-content-md-end {
    align-content: flex-end !important;
  }

  .align-content-md-center {
    align-content: center !important;
  }

  .align-content-md-between {
    align-content: space-between !important;
  }

  .align-content-md-around {
    align-content: space-around !important;
  }

  .align-content-md-stretch {
    align-content: stretch !important;
  }

  .align-self-md-auto {
    align-self: auto !important;
  }

  .align-self-md-start {
    align-self: flex-start !important;
  }

  .align-self-md-end {
    align-self: flex-end !important;
  }

  .align-self-md-center {
    align-self: center !important;
  }

  .align-self-md-baseline {
    align-self: baseline !important;
  }

  .align-self-md-stretch {
    align-self: stretch !important;
  }
}

@media (min-width: 992px) {
  .flex-lg-row {
    flex-direction: row !important;
  }

  .flex-lg-column {
    flex-direction: column !important;
  }

  .flex-lg-row-reverse {
    flex-direction: row-reverse !important;
  }

  .flex-lg-column-reverse {
    flex-direction: column-reverse !important;
  }

  .flex-lg-wrap {
    flex-wrap: wrap !important;
  }

  .flex-lg-nowrap {
    flex-wrap: nowrap !important;
  }

  .flex-lg-wrap-reverse {
    flex-wrap: wrap-reverse !important;
  }

  .flex-lg-fill {
    flex: 1 1 auto !important;
  }

  .flex-lg-grow-0 {
    flex-grow: 0 !important;
  }

  .flex-lg-grow-1 {
    flex-grow: 1 !important;
  }

  .flex-lg-shrink-0 {
    flex-shrink: 0 !important;
  }

  .flex-lg-shrink-1 {
    flex-shrink: 1 !important;
  }

  .justify-content-lg-start {
    justify-content: flex-start !important;
  }

  .justify-content-lg-end {
    justify-content: flex-end !important;
  }

  .justify-content-lg-center {
    justify-content: center !important;
  }

  .justify-content-lg-between {
    justify-content: space-between !important;
  }

  .justify-content-lg-around {
    justify-content: space-around !important;
  }

  .align-items-lg-start {
    align-items: flex-start !important;
  }

  .align-items-lg-end {
    align-items: flex-end !important;
  }

  .align-items-lg-center {
    align-items: center !important;
  }

  .align-items-lg-baseline {
    align-items: baseline !important;
  }

  .align-items-lg-stretch {
    align-items: stretch !important;
  }

  .align-content-lg-start {
    align-content: flex-start !important;
  }

  .align-content-lg-end {
    align-content: flex-end !important;
  }

  .align-content-lg-center {
    align-content: center !important;
  }

  .align-content-lg-between {
    align-content: space-between !important;
  }

  .align-content-lg-around {
    align-content: space-around !important;
  }

  .align-content-lg-stretch {
    align-content: stretch !important;
  }

  .align-self-lg-auto {
    align-self: auto !important;
  }

  .align-self-lg-start {
    align-self: flex-start !important;
  }

  .align-self-lg-end {
    align-self: flex-end !important;
  }

  .align-self-lg-center {
    align-self: center !important;
  }

  .align-self-lg-baseline {
    align-self: baseline !important;
  }

  .align-self-lg-stretch {
    align-self: stretch !important;
  }
}

@media (min-width: 1200px) {
  .flex-xl-row {
    flex-direction: row !important;
  }

  .flex-xl-column {
    flex-direction: column !important;
  }

  .flex-xl-row-reverse {
    flex-direction: row-reverse !important;
  }

  .flex-xl-column-reverse {
    flex-direction: column-reverse !important;
  }

  .flex-xl-wrap {
    flex-wrap: wrap !important;
  }

  .flex-xl-nowrap {
    flex-wrap: nowrap !important;
  }

  .flex-xl-wrap-reverse {
    flex-wrap: wrap-reverse !important;
  }

  .flex-xl-fill {
    flex: 1 1 auto !important;
  }

  .flex-xl-grow-0 {
    flex-grow: 0 !important;
  }

  .flex-xl-grow-1 {
    flex-grow: 1 !important;
  }

  .flex-xl-shrink-0 {
    flex-shrink: 0 !important;
  }

  .flex-xl-shrink-1 {
    flex-shrink: 1 !important;
  }

  .justify-content-xl-start {
    justify-content: flex-start !important;
  }

  .justify-content-xl-end {
    justify-content: flex-end !important;
  }

  .justify-content-xl-center {
    justify-content: center !important;
  }

  .justify-content-xl-between {
    justify-content: space-between !important;
  }

  .justify-content-xl-around {
    justify-content: space-around !important;
  }

  .align-items-xl-start {
    align-items: flex-start !important;
  }

  .align-items-xl-end {
    align-items: flex-end !important;
  }

  .align-items-xl-center {
    align-items: center !important;
  }

  .align-items-xl-baseline {
    align-items: baseline !important;
  }

  .align-items-xl-stretch {
    align-items: stretch !important;
  }

  .align-content-xl-start {
    align-content: flex-start !important;
  }

  .align-content-xl-end {
    align-content: flex-end !important;
  }

  .align-content-xl-center {
    align-content: center !important;
  }

  .align-content-xl-between {
    align-content: space-between !important;
  }

  .align-content-xl-around {
    align-content: space-around !important;
  }

  .align-content-xl-stretch {
    align-content: stretch !important;
  }

  .align-self-xl-auto {
    align-self: auto !important;
  }

  .align-self-xl-start {
    align-self: flex-start !important;
  }

  .align-self-xl-end {
    align-self: flex-end !important;
  }

  .align-self-xl-center {
    align-self: center !important;
  }

  .align-self-xl-baseline {
    align-self: baseline !important;
  }

  .align-self-xl-stretch {
    align-self: stretch !important;
  }
}

.float-left {
  float: left !important;
}

.float-right {
  float: right !important;
}

.float-none {
  float: none !important;
}

@media (min-width: 576px) {
  .float-sm-left {
    float: left !important;
  }

  .float-sm-right {
    float: right !important;
  }

  .float-sm-none {
    float: none !important;
  }
}

@media (min-width: 768px) {
  .float-md-left {
    float: left !important;
  }

  .float-md-right {
    float: right !important;
  }

  .float-md-none {
    float: none !important;
  }
}

@media (min-width: 992px) {
  .float-lg-left {
    float: left !important;
  }

  .float-lg-right {
    float: right !important;
  }

  .float-lg-none {
    float: none !important;
  }
}

@media (min-width: 1200px) {
  .float-xl-left {
    float: left !important;
  }

  .float-xl-right {
    float: right !important;
  }

  .float-xl-none {
    float: none !important;
  }
}

.overflow-auto {
  overflow: auto !important;
}

.overflow-hidden {
  overflow: hidden !important;
}

.position-static {
  position: static !important;
}

.position-relative {
  position: relative !important;
}

.position-absolute {
  position: absolute !important;
}

.position-fixed {
  position: fixed !important;
}

.position-sticky {
  position: sticky !important;
}

.fixed-top {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1030;
}

.fixed-bottom {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1030;
}

@supports (position: sticky) {
  .sticky-top {
    position: sticky;
    top: 0;
    z-index: 1020;
  }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.sr-only-focusable:active,
.sr-only-focusable:focus {
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

.shadow-sm {
  box-shadow: 0 0.125rem 0.25rem rgba(34, 42, 66, 0.075) !important;
}

.shadow {
  box-shadow: 0 1px 20px 0px rgba(0, 0, 0, 0.1) !important;
}

.shadow-lg {
  box-shadow: 0 1rem 3rem rgba(34, 42, 66, 0.175) !important;
}

.shadow-none {
  box-shadow: none !important;
}

.w-25 {
  width: 25% !important;
}

.w-50 {
  width: 50% !important;
}

.w-75 {
  width: 75% !important;
}

.w-100 {
  width: 100% !important;
}

.w-auto {
  width: auto !important;
}

.h-25 {
  height: 25% !important;
}

.h-50 {
  height: 50% !important;
}

.h-75 {
  height: 75% !important;
}

.h-100 {
  height: 100% !important;
}

.h-auto {
  height: auto !important;
}

.mw-100 {
  max-width: 100% !important;
}

.mh-100 {
  max-height: 100% !important;
}

.min-vw-100 {
  min-width: 100vw !important;
}

.min-vh-100 {
  min-height: 100vh !important;
}

.vw-100 {
  width: 100vw !important;
}

.vh-100 {
  height: 100vh !important;
}

.stretched-link::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  pointer-events: auto;
  content: "";
  background-color: rgba(0, 0, 0, 0);
}

.m-0 {
  margin: 0 !important;
}

.mt-0,
.my-0 {
  margin-top: 0 !important;
}

.mr-0,
.mx-0 {
  margin-right: 0 !important;
}

.mb-0,
.my-0 {
  margin-bottom: 0 !important;
}

.ml-0,
.mx-0 {
  margin-left: 0 !important;
}

.m-1 {
  margin: 0.25rem !important;
}

.mt-1,
.my-1 {
  margin-top: 0.25rem !important;
}

.mr-1,
.mx-1 {
  margin-right: 0.25rem !important;
}

.mb-1,
.my-1 {
  margin-bottom: 0.25rem !important;
}

.ml-1,
.mx-1 {
  margin-left: 0.25rem !important;
}

.m-2 {
  margin: 0.5rem !important;
}

.mt-2,
.my-2 {
  margin-top: 0.5rem !important;
}

.mr-2,
.mx-2 {
  margin-right: 0.5rem !important;
}

.mb-2,
.my-2 {
  margin-bottom: 0.5rem !important;
}

.ml-2,
.mx-2 {
  margin-left: 0.5rem !important;
}

.m-3 {
  margin: 1rem !important;
}

.mt-3,
.my-3 {
  margin-top: 1rem !important;
}

.mr-3,
.mx-3 {
  margin-right: 1rem !important;
}

.mb-3,
.my-3 {
  margin-bottom: 1rem !important;
}

.ml-3,
.mx-3 {
  margin-left: 1rem !important;
}

.m-4 {
  margin: 1.5rem !important;
}

.mt-4,
.my-4 {
  margin-top: 1.5rem !important;
}

.mr-4,
.mx-4 {
  margin-right: 1.5rem !important;
}

.mb-4,
.my-4 {
  margin-bottom: 1.5rem !important;
}

.ml-4,
.mx-4 {
  margin-left: 1.5rem !important;
}

.m-5 {
  margin: 3rem !important;
}

.mt-5,
.my-5 {
  margin-top: 3rem !important;
}

.mr-5,
.mx-5 {
  margin-right: 3rem !important;
}

.mb-5,
.my-5 {
  margin-bottom: 3rem !important;
}

.ml-5,
.mx-5 {
  margin-left: 3rem !important;
}

.m-sm {
  margin: 2rem !important;
}

.mt-sm,
.my-sm {
  margin-top: 2rem !important;
}

.mr-sm,
.mx-sm {
  margin-right: 2rem !important;
}

.mb-sm,
.my-sm {
  margin-bottom: 2rem !important;
}

.ml-sm,
.mx-sm {
  margin-left: 2rem !important;
}

.m-md {
  margin: 4rem !important;
}

.mt-md,
.my-md {
  margin-top: 4rem !important;
}

.mr-md,
.mx-md {
  margin-right: 4rem !important;
}

.mb-md,
.my-md {
  margin-bottom: 4rem !important;
}

.ml-md,
.mx-md {
  margin-left: 4rem !important;
}

.m-lg {
  margin: 6rem !important;
}

.mt-lg,
.my-lg {
  margin-top: 6rem !important;
}

.mr-lg,
.mx-lg {
  margin-right: 6rem !important;
}

.mb-lg,
.my-lg {
  margin-bottom: 6rem !important;
}

.ml-lg,
.mx-lg {
  margin-left: 6rem !important;
}

.m-xl {
  margin: 8rem !important;
}

.mt-xl,
.my-xl {
  margin-top: 8rem !important;
}

.mr-xl,
.mx-xl {
  margin-right: 8rem !important;
}

.mb-xl,
.my-xl {
  margin-bottom: 8rem !important;
}

.ml-xl,
.mx-xl {
  margin-left: 8rem !important;
}

.p-0 {
  padding: 0 !important;
}

.pt-0,
.py-0 {
  padding-top: 0 !important;
}

.pr-0,
.px-0 {
  padding-right: 0 !important;
}

.pb-0,
.py-0 {
  padding-bottom: 0 !important;
}

.pl-0,
.px-0 {
  padding-left: 0 !important;
}

.p-1 {
  padding: 0.25rem !important;
}

.pt-1,
.py-1 {
  padding-top: 0.25rem !important;
}

.pr-1,
.px-1 {
  padding-right: 0.25rem !important;
}

.pb-1,
.py-1 {
  padding-bottom: 0.25rem !important;
}

.pl-1,
.px-1 {
  padding-left: 0.25rem !important;
}

.p-2 {
  padding: 0.5rem !important;
}

.pt-2,
.py-2 {
  padding-top: 0.5rem !important;
}

.pr-2,
.px-2 {
  padding-right: 0.5rem !important;
}

.pb-2,
.py-2 {
  padding-bottom: 0.5rem !important;
}

.pl-2,
.px-2 {
  padding-left: 0.5rem !important;
}

.p-3 {
  padding: 1rem !important;
}

.pt-3,
.py-3 {
  padding-top: 1rem !important;
}

.pr-3,
.px-3 {
  padding-right: 1rem !important;
}

.pb-3,
.py-3 {
  padding-bottom: 1rem !important;
}

.pl-3,
.px-3 {
  padding-left: 1rem !important;
}

.p-4 {
  padding: 1.5rem !important;
}

.pt-4,
.py-4 {
  padding-top: 1.5rem !important;
}

.pr-4,
.px-4 {
  padding-right: 1.5rem !important;
}

.pb-4,
.py-4 {
  padding-bottom: 1.5rem !important;
}

.pl-4,
.px-4 {
  padding-left: 1.5rem !important;
}

.p-5 {
  padding: 3rem !important;
}

.pt-5,
.py-5 {
  padding-top: 3rem !important;
}

.pr-5,
.px-5 {
  padding-right: 3rem !important;
}

.pb-5,
.py-5 {
  padding-bottom: 3rem !important;
}

.pl-5,
.px-5 {
  padding-left: 3rem !important;
}

.p-sm {
  padding: 2rem !important;
}

.pt-sm,
.py-sm {
  padding-top: 2rem !important;
}

.pr-sm,
.px-sm {
  padding-right: 2rem !important;
}

.pb-sm,
.py-sm {
  padding-bottom: 2rem !important;
}

.pl-sm,
.px-sm {
  padding-left: 2rem !important;
}

.p-md {
  padding: 4rem !important;
}

.pt-md,
.py-md {
  padding-top: 4rem !important;
}

.pr-md,
.px-md {
  padding-right: 4rem !important;
}

.pb-md,
.py-md {
  padding-bottom: 4rem !important;
}

.pl-md,
.px-md {
  padding-left: 4rem !important;
}

.p-lg {
  padding: 6rem !important;
}

.pt-lg,
.py-lg {
  padding-top: 6rem !important;
}

.pr-lg,
.px-lg {
  padding-right: 6rem !important;
}

.pb-lg,
.py-lg {
  padding-bottom: 6rem !important;
}

.pl-lg,
.px-lg {
  padding-left: 6rem !important;
}

.p-xl {
  padding: 8rem !important;
}

.pt-xl,
.py-xl {
  padding-top: 8rem !important;
}

.pr-xl,
.px-xl {
  padding-right: 8rem !important;
}

.pb-xl,
.py-xl {
  padding-bottom: 8rem !important;
}

.pl-xl,
.px-xl {
  padding-left: 8rem !important;
}

.m-n1 {
  margin: -0.25rem !important;
}

.mt-n1,
.my-n1 {
  margin-top: -0.25rem !important;
}

.mr-n1,
.mx-n1 {
  margin-right: -0.25rem !important;
}

.mb-n1,
.my-n1 {
  margin-bottom: -0.25rem !important;
}

.ml-n1,
.mx-n1 {
  margin-left: -0.25rem !important;
}

.m-n2 {
  margin: -0.5rem !important;
}

.mt-n2,
.my-n2 {
  margin-top: -0.5rem !important;
}

.mr-n2,
.mx-n2 {
  margin-right: -0.5rem !important;
}

.mb-n2,
.my-n2 {
  margin-bottom: -0.5rem !important;
}

.ml-n2,
.mx-n2 {
  margin-left: -0.5rem !important;
}

.m-n3 {
  margin: -1rem !important;
}

.mt-n3,
.my-n3 {
  margin-top: -1rem !important;
}

.mr-n3,
.mx-n3 {
  margin-right: -1rem !important;
}

.mb-n3,
.my-n3 {
  margin-bottom: -1rem !important;
}

.ml-n3,
.mx-n3 {
  margin-left: -1rem !important;
}

.m-n4 {
  margin: -1.5rem !important;
}

.mt-n4,
.my-n4 {
  margin-top: -1.5rem !important;
}

.mr-n4,
.mx-n4 {
  margin-right: -1.5rem !important;
}

.mb-n4,
.my-n4 {
  margin-bottom: -1.5rem !important;
}

.ml-n4,
.mx-n4 {
  margin-left: -1.5rem !important;
}

.m-n5 {
  margin: -3rem !important;
}

.mt-n5,
.my-n5 {
  margin-top: -3rem !important;
}

.mr-n5,
.mx-n5 {
  margin-right: -3rem !important;
}

.mb-n5,
.my-n5 {
  margin-bottom: -3rem !important;
}

.ml-n5,
.mx-n5 {
  margin-left: -3rem !important;
}

.m-nsm {
  margin: -2rem !important;
}

.mt-nsm,
.my-nsm {
  margin-top: -2rem !important;
}

.mr-nsm,
.mx-nsm {
  margin-right: -2rem !important;
}

.mb-nsm,
.my-nsm {
  margin-bottom: -2rem !important;
}

.ml-nsm,
.mx-nsm {
  margin-left: -2rem !important;
}

.m-nmd {
  margin: -4rem !important;
}

.mt-nmd,
.my-nmd {
  margin-top: -4rem !important;
}

.mr-nmd,
.mx-nmd {
  margin-right: -4rem !important;
}

.mb-nmd,
.my-nmd {
  margin-bottom: -4rem !important;
}

.ml-nmd,
.mx-nmd {
  margin-left: -4rem !important;
}

.m-nlg {
  margin: -6rem !important;
}

.mt-nlg,
.my-nlg {
  margin-top: -6rem !important;
}

.mr-nlg,
.mx-nlg {
  margin-right: -6rem !important;
}

.mb-nlg,
.my-nlg {
  margin-bottom: -6rem !important;
}

.ml-nlg,
.mx-nlg {
  margin-left: -6rem !important;
}

.m-nxl {
  margin: -8rem !important;
}

.mt-nxl,
.my-nxl {
  margin-top: -8rem !important;
}

.mr-nxl,
.mx-nxl {
  margin-right: -8rem !important;
}

.mb-nxl,
.my-nxl {
  margin-bottom: -8rem !important;
}

.ml-nxl,
.mx-nxl {
  margin-left: -8rem !important;
}

.m-auto {
  margin: auto !important;
}

.mt-auto,
.my-auto {
  margin-top: auto !important;
}

.mr-auto,
.mx-auto {
  margin-right: auto !important;
}

.mb-auto,
.my-auto {
  margin-bottom: auto !important;
}

.ml-auto,
.mx-auto {
  margin-left: auto !important;
}

@media (min-width: 576px) {
  .m-sm-0 {
    margin: 0 !important;
  }

  .mt-sm-0,
  .my-sm-0 {
    margin-top: 0 !important;
  }

  .mr-sm-0,
  .mx-sm-0 {
    margin-right: 0 !important;
  }

  .mb-sm-0,
  .my-sm-0 {
    margin-bottom: 0 !important;
  }

  .ml-sm-0,
  .mx-sm-0 {
    margin-left: 0 !important;
  }

  .m-sm-1 {
    margin: 0.25rem !important;
  }

  .mt-sm-1,
  .my-sm-1 {
    margin-top: 0.25rem !important;
  }

  .mr-sm-1,
  .mx-sm-1 {
    margin-right: 0.25rem !important;
  }

  .mb-sm-1,
  .my-sm-1 {
    margin-bottom: 0.25rem !important;
  }

  .ml-sm-1,
  .mx-sm-1 {
    margin-left: 0.25rem !important;
  }

  .m-sm-2 {
    margin: 0.5rem !important;
  }

  .mt-sm-2,
  .my-sm-2 {
    margin-top: 0.5rem !important;
  }

  .mr-sm-2,
  .mx-sm-2 {
    margin-right: 0.5rem !important;
  }

  .mb-sm-2,
  .my-sm-2 {
    margin-bottom: 0.5rem !important;
  }

  .ml-sm-2,
  .mx-sm-2 {
    margin-left: 0.5rem !important;
  }

  .m-sm-3 {
    margin: 1rem !important;
  }

  .mt-sm-3,
  .my-sm-3 {
    margin-top: 1rem !important;
  }

  .mr-sm-3,
  .mx-sm-3 {
    margin-right: 1rem !important;
  }

  .mb-sm-3,
  .my-sm-3 {
    margin-bottom: 1rem !important;
  }

  .ml-sm-3,
  .mx-sm-3 {
    margin-left: 1rem !important;
  }

  .m-sm-4 {
    margin: 1.5rem !important;
  }

  .mt-sm-4,
  .my-sm-4 {
    margin-top: 1.5rem !important;
  }

  .mr-sm-4,
  .mx-sm-4 {
    margin-right: 1.5rem !important;
  }

  .mb-sm-4,
  .my-sm-4 {
    margin-bottom: 1.5rem !important;
  }

  .ml-sm-4,
  .mx-sm-4 {
    margin-left: 1.5rem !important;
  }

  .m-sm-5 {
    margin: 3rem !important;
  }

  .mt-sm-5,
  .my-sm-5 {
    margin-top: 3rem !important;
  }

  .mr-sm-5,
  .mx-sm-5 {
    margin-right: 3rem !important;
  }

  .mb-sm-5,
  .my-sm-5 {
    margin-bottom: 3rem !important;
  }

  .ml-sm-5,
  .mx-sm-5 {
    margin-left: 3rem !important;
  }

  .m-sm-sm {
    margin: 2rem !important;
  }

  .mt-sm-sm,
  .my-sm-sm {
    margin-top: 2rem !important;
  }

  .mr-sm-sm,
  .mx-sm-sm {
    margin-right: 2rem !important;
  }

  .mb-sm-sm,
  .my-sm-sm {
    margin-bottom: 2rem !important;
  }

  .ml-sm-sm,
  .mx-sm-sm {
    margin-left: 2rem !important;
  }

  .m-sm-md {
    margin: 4rem !important;
  }

  .mt-sm-md,
  .my-sm-md {
    margin-top: 4rem !important;
  }

  .mr-sm-md,
  .mx-sm-md {
    margin-right: 4rem !important;
  }

  .mb-sm-md,
  .my-sm-md {
    margin-bottom: 4rem !important;
  }

  .ml-sm-md,
  .mx-sm-md {
    margin-left: 4rem !important;
  }

  .m-sm-lg {
    margin: 6rem !important;
  }

  .mt-sm-lg,
  .my-sm-lg {
    margin-top: 6rem !important;
  }

  .mr-sm-lg,
  .mx-sm-lg {
    margin-right: 6rem !important;
  }

  .mb-sm-lg,
  .my-sm-lg {
    margin-bottom: 6rem !important;
  }

  .ml-sm-lg,
  .mx-sm-lg {
    margin-left: 6rem !important;
  }

  .m-sm-xl {
    margin: 8rem !important;
  }

  .mt-sm-xl,
  .my-sm-xl {
    margin-top: 8rem !important;
  }

  .mr-sm-xl,
  .mx-sm-xl {
    margin-right: 8rem !important;
  }

  .mb-sm-xl,
  .my-sm-xl {
    margin-bottom: 8rem !important;
  }

  .ml-sm-xl,
  .mx-sm-xl {
    margin-left: 8rem !important;
  }

  .p-sm-0 {
    padding: 0 !important;
  }

  .pt-sm-0,
  .py-sm-0 {
    padding-top: 0 !important;
  }

  .pr-sm-0,
  .px-sm-0 {
    padding-right: 0 !important;
  }

  .pb-sm-0,
  .py-sm-0 {
    padding-bottom: 0 !important;
  }

  .pl-sm-0,
  .px-sm-0 {
    padding-left: 0 !important;
  }

  .p-sm-1 {
    padding: 0.25rem !important;
  }

  .pt-sm-1,
  .py-sm-1 {
    padding-top: 0.25rem !important;
  }

  .pr-sm-1,
  .px-sm-1 {
    padding-right: 0.25rem !important;
  }

  .pb-sm-1,
  .py-sm-1 {
    padding-bottom: 0.25rem !important;
  }

  .pl-sm-1,
  .px-sm-1 {
    padding-left: 0.25rem !important;
  }

  .p-sm-2 {
    padding: 0.5rem !important;
  }

  .pt-sm-2,
  .py-sm-2 {
    padding-top: 0.5rem !important;
  }

  .pr-sm-2,
  .px-sm-2 {
    padding-right: 0.5rem !important;
  }

  .pb-sm-2,
  .py-sm-2 {
    padding-bottom: 0.5rem !important;
  }

  .pl-sm-2,
  .px-sm-2 {
    padding-left: 0.5rem !important;
  }

  .p-sm-3 {
    padding: 1rem !important;
  }

  .pt-sm-3,
  .py-sm-3 {
    padding-top: 1rem !important;
  }

  .pr-sm-3,
  .px-sm-3 {
    padding-right: 1rem !important;
  }

  .pb-sm-3,
  .py-sm-3 {
    padding-bottom: 1rem !important;
  }

  .pl-sm-3,
  .px-sm-3 {
    padding-left: 1rem !important;
  }

  .p-sm-4 {
    padding: 1.5rem !important;
  }

  .pt-sm-4,
  .py-sm-4 {
    padding-top: 1.5rem !important;
  }

  .pr-sm-4,
  .px-sm-4 {
    padding-right: 1.5rem !important;
  }

  .pb-sm-4,
  .py-sm-4 {
    padding-bottom: 1.5rem !important;
  }

  .pl-sm-4,
  .px-sm-4 {
    padding-left: 1.5rem !important;
  }

  .p-sm-5 {
    padding: 3rem !important;
  }

  .pt-sm-5,
  .py-sm-5 {
    padding-top: 3rem !important;
  }

  .pr-sm-5,
  .px-sm-5 {
    padding-right: 3rem !important;
  }

  .pb-sm-5,
  .py-sm-5 {
    padding-bottom: 3rem !important;
  }

  .pl-sm-5,
  .px-sm-5 {
    padding-left: 3rem !important;
  }

  .p-sm-sm {
    padding: 2rem !important;
  }

  .pt-sm-sm,
  .py-sm-sm {
    padding-top: 2rem !important;
  }

  .pr-sm-sm,
  .px-sm-sm {
    padding-right: 2rem !important;
  }

  .pb-sm-sm,
  .py-sm-sm {
    padding-bottom: 2rem !important;
  }

  .pl-sm-sm,
  .px-sm-sm {
    padding-left: 2rem !important;
  }

  .p-sm-md {
    padding: 4rem !important;
  }

  .pt-sm-md,
  .py-sm-md {
    padding-top: 4rem !important;
  }

  .pr-sm-md,
  .px-sm-md {
    padding-right: 4rem !important;
  }

  .pb-sm-md,
  .py-sm-md {
    padding-bottom: 4rem !important;
  }

  .pl-sm-md,
  .px-sm-md {
    padding-left: 4rem !important;
  }

  .p-sm-lg {
    padding: 6rem !important;
  }

  .pt-sm-lg,
  .py-sm-lg {
    padding-top: 6rem !important;
  }

  .pr-sm-lg,
  .px-sm-lg {
    padding-right: 6rem !important;
  }

  .pb-sm-lg,
  .py-sm-lg {
    padding-bottom: 6rem !important;
  }

  .pl-sm-lg,
  .px-sm-lg {
    padding-left: 6rem !important;
  }

  .p-sm-xl {
    padding: 8rem !important;
  }

  .pt-sm-xl,
  .py-sm-xl {
    padding-top: 8rem !important;
  }

  .pr-sm-xl,
  .px-sm-xl {
    padding-right: 8rem !important;
  }

  .pb-sm-xl,
  .py-sm-xl {
    padding-bottom: 8rem !important;
  }

  .pl-sm-xl,
  .px-sm-xl {
    padding-left: 8rem !important;
  }

  .m-sm-n1 {
    margin: -0.25rem !important;
  }

  .mt-sm-n1,
  .my-sm-n1 {
    margin-top: -0.25rem !important;
  }

  .mr-sm-n1,
  .mx-sm-n1 {
    margin-right: -0.25rem !important;
  }

  .mb-sm-n1,
  .my-sm-n1 {
    margin-bottom: -0.25rem !important;
  }

  .ml-sm-n1,
  .mx-sm-n1 {
    margin-left: -0.25rem !important;
  }

  .m-sm-n2 {
    margin: -0.5rem !important;
  }

  .mt-sm-n2,
  .my-sm-n2 {
    margin-top: -0.5rem !important;
  }

  .mr-sm-n2,
  .mx-sm-n2 {
    margin-right: -0.5rem !important;
  }

  .mb-sm-n2,
  .my-sm-n2 {
    margin-bottom: -0.5rem !important;
  }

  .ml-sm-n2,
  .mx-sm-n2 {
    margin-left: -0.5rem !important;
  }

  .m-sm-n3 {
    margin: -1rem !important;
  }

  .mt-sm-n3,
  .my-sm-n3 {
    margin-top: -1rem !important;
  }

  .mr-sm-n3,
  .mx-sm-n3 {
    margin-right: -1rem !important;
  }

  .mb-sm-n3,
  .my-sm-n3 {
    margin-bottom: -1rem !important;
  }

  .ml-sm-n3,
  .mx-sm-n3 {
    margin-left: -1rem !important;
  }

  .m-sm-n4 {
    margin: -1.5rem !important;
  }

  .mt-sm-n4,
  .my-sm-n4 {
    margin-top: -1.5rem !important;
  }

  .mr-sm-n4,
  .mx-sm-n4 {
    margin-right: -1.5rem !important;
  }

  .mb-sm-n4,
  .my-sm-n4 {
    margin-bottom: -1.5rem !important;
  }

  .ml-sm-n4,
  .mx-sm-n4 {
    margin-left: -1.5rem !important;
  }

  .m-sm-n5 {
    margin: -3rem !important;
  }

  .mt-sm-n5,
  .my-sm-n5 {
    margin-top: -3rem !important;
  }

  .mr-sm-n5,
  .mx-sm-n5 {
    margin-right: -3rem !important;
  }

  .mb-sm-n5,
  .my-sm-n5 {
    margin-bottom: -3rem !important;
  }

  .ml-sm-n5,
  .mx-sm-n5 {
    margin-left: -3rem !important;
  }

  .m-sm-nsm {
    margin: -2rem !important;
  }

  .mt-sm-nsm,
  .my-sm-nsm {
    margin-top: -2rem !important;
  }

  .mr-sm-nsm,
  .mx-sm-nsm {
    margin-right: -2rem !important;
  }

  .mb-sm-nsm,
  .my-sm-nsm {
    margin-bottom: -2rem !important;
  }

  .ml-sm-nsm,
  .mx-sm-nsm {
    margin-left: -2rem !important;
  }

  .m-sm-nmd {
    margin: -4rem !important;
  }

  .mt-sm-nmd,
  .my-sm-nmd {
    margin-top: -4rem !important;
  }

  .mr-sm-nmd,
  .mx-sm-nmd {
    margin-right: -4rem !important;
  }

  .mb-sm-nmd,
  .my-sm-nmd {
    margin-bottom: -4rem !important;
  }

  .ml-sm-nmd,
  .mx-sm-nmd {
    margin-left: -4rem !important;
  }

  .m-sm-nlg {
    margin: -6rem !important;
  }

  .mt-sm-nlg,
  .my-sm-nlg {
    margin-top: -6rem !important;
  }

  .mr-sm-nlg,
  .mx-sm-nlg {
    margin-right: -6rem !important;
  }

  .mb-sm-nlg,
  .my-sm-nlg {
    margin-bottom: -6rem !important;
  }

  .ml-sm-nlg,
  .mx-sm-nlg {
    margin-left: -6rem !important;
  }

  .m-sm-nxl {
    margin: -8rem !important;
  }

  .mt-sm-nxl,
  .my-sm-nxl {
    margin-top: -8rem !important;
  }

  .mr-sm-nxl,
  .mx-sm-nxl {
    margin-right: -8rem !important;
  }

  .mb-sm-nxl,
  .my-sm-nxl {
    margin-bottom: -8rem !important;
  }

  .ml-sm-nxl,
  .mx-sm-nxl {
    margin-left: -8rem !important;
  }

  .m-sm-auto {
    margin: auto !important;
  }

  .mt-sm-auto,
  .my-sm-auto {
    margin-top: auto !important;
  }

  .mr-sm-auto,
  .mx-sm-auto {
    margin-right: auto !important;
  }

  .mb-sm-auto,
  .my-sm-auto {
    margin-bottom: auto !important;
  }

  .ml-sm-auto,
  .mx-sm-auto {
    margin-left: auto !important;
  }
}

@media (min-width: 768px) {
  .m-md-0 {
    margin: 0 !important;
  }

  .mt-md-0,
  .my-md-0 {
    margin-top: 0 !important;
  }

  .mr-md-0,
  .mx-md-0 {
    margin-right: 0 !important;
  }

  .mb-md-0,
  .my-md-0 {
    margin-bottom: 0 !important;
  }

  .ml-md-0,
  .mx-md-0 {
    margin-left: 0 !important;
  }

  .m-md-1 {
    margin: 0.25rem !important;
  }

  .mt-md-1,
  .my-md-1 {
    margin-top: 0.25rem !important;
  }

  .mr-md-1,
  .mx-md-1 {
    margin-right: 0.25rem !important;
  }

  .mb-md-1,
  .my-md-1 {
    margin-bottom: 0.25rem !important;
  }

  .ml-md-1,
  .mx-md-1 {
    margin-left: 0.25rem !important;
  }

  .m-md-2 {
    margin: 0.5rem !important;
  }

  .mt-md-2,
  .my-md-2 {
    margin-top: 0.5rem !important;
  }

  .mr-md-2,
  .mx-md-2 {
    margin-right: 0.5rem !important;
  }

  .mb-md-2,
  .my-md-2 {
    margin-bottom: 0.5rem !important;
  }

  .ml-md-2,
  .mx-md-2 {
    margin-left: 0.5rem !important;
  }

  .m-md-3 {
    margin: 1rem !important;
  }

  .mt-md-3,
  .my-md-3 {
    margin-top: 1rem !important;
  }

  .mr-md-3,
  .mx-md-3 {
    margin-right: 1rem !important;
  }

  .mb-md-3,
  .my-md-3 {
    margin-bottom: 1rem !important;
  }

  .ml-md-3,
  .mx-md-3 {
    margin-left: 1rem !important;
  }

  .m-md-4 {
    margin: 1.5rem !important;
  }

  .mt-md-4,
  .my-md-4 {
    margin-top: 1.5rem !important;
  }

  .mr-md-4,
  .mx-md-4 {
    margin-right: 1.5rem !important;
  }

  .mb-md-4,
  .my-md-4 {
    margin-bottom: 1.5rem !important;
  }

  .ml-md-4,
  .mx-md-4 {
    margin-left: 1.5rem !important;
  }

  .m-md-5 {
    margin: 3rem !important;
  }

  .mt-md-5,
  .my-md-5 {
    margin-top: 3rem !important;
  }

  .mr-md-5,
  .mx-md-5 {
    margin-right: 3rem !important;
  }

  .mb-md-5,
  .my-md-5 {
    margin-bottom: 3rem !important;
  }

  .ml-md-5,
  .mx-md-5 {
    margin-left: 3rem !important;
  }

  .m-md-sm {
    margin: 2rem !important;
  }

  .mt-md-sm,
  .my-md-sm {
    margin-top: 2rem !important;
  }

  .mr-md-sm,
  .mx-md-sm {
    margin-right: 2rem !important;
  }

  .mb-md-sm,
  .my-md-sm {
    margin-bottom: 2rem !important;
  }

  .ml-md-sm,
  .mx-md-sm {
    margin-left: 2rem !important;
  }

  .m-md-md {
    margin: 4rem !important;
  }

  .mt-md-md,
  .my-md-md {
    margin-top: 4rem !important;
  }

  .mr-md-md,
  .mx-md-md {
    margin-right: 4rem !important;
  }

  .mb-md-md,
  .my-md-md {
    margin-bottom: 4rem !important;
  }

  .ml-md-md,
  .mx-md-md {
    margin-left: 4rem !important;
  }

  .m-md-lg {
    margin: 6rem !important;
  }

  .mt-md-lg,
  .my-md-lg {
    margin-top: 6rem !important;
  }

  .mr-md-lg,
  .mx-md-lg {
    margin-right: 6rem !important;
  }

  .mb-md-lg,
  .my-md-lg {
    margin-bottom: 6rem !important;
  }

  .ml-md-lg,
  .mx-md-lg {
    margin-left: 6rem !important;
  }

  .m-md-xl {
    margin: 8rem !important;
  }

  .mt-md-xl,
  .my-md-xl {
    margin-top: 8rem !important;
  }

  .mr-md-xl,
  .mx-md-xl {
    margin-right: 8rem !important;
  }

  .mb-md-xl,
  .my-md-xl {
    margin-bottom: 8rem !important;
  }

  .ml-md-xl,
  .mx-md-xl {
    margin-left: 8rem !important;
  }

  .p-md-0 {
    padding: 0 !important;
  }

  .pt-md-0,
  .py-md-0 {
    padding-top: 0 !important;
  }

  .pr-md-0,
  .px-md-0 {
    padding-right: 0 !important;
  }

  .pb-md-0,
  .py-md-0 {
    padding-bottom: 0 !important;
  }

  .pl-md-0,
  .px-md-0 {
    padding-left: 0 !important;
  }

  .p-md-1 {
    padding: 0.25rem !important;
  }

  .pt-md-1,
  .py-md-1 {
    padding-top: 0.25rem !important;
  }

  .pr-md-1,
  .px-md-1 {
    padding-right: 0.25rem !important;
  }

  .pb-md-1,
  .py-md-1 {
    padding-bottom: 0.25rem !important;
  }

  .pl-md-1,
  .px-md-1 {
    padding-left: 0.25rem !important;
  }

  .p-md-2 {
    padding: 0.5rem !important;
  }

  .pt-md-2,
  .py-md-2 {
    padding-top: 0.5rem !important;
  }

  .pr-md-2,
  .px-md-2 {
    padding-right: 0.5rem !important;
  }

  .pb-md-2,
  .py-md-2 {
    padding-bottom: 0.5rem !important;
  }

  .pl-md-2,
  .px-md-2 {
    padding-left: 0.5rem !important;
  }

  .p-md-3 {
    padding: 1rem !important;
  }

  .pt-md-3,
  .py-md-3 {
    padding-top: 1rem !important;
  }

  .pr-md-3,
  .px-md-3 {
    padding-right: 1rem !important;
  }

  .pb-md-3,
  .py-md-3 {
    padding-bottom: 1rem !important;
  }

  .pl-md-3,
  .px-md-3 {
    padding-left: 1rem !important;
  }

  .p-md-4 {
    padding: 1.5rem !important;
  }

  .pt-md-4,
  .py-md-4 {
    padding-top: 1.5rem !important;
  }

  .pr-md-4,
  .px-md-4 {
    padding-right: 1.5rem !important;
  }

  .pb-md-4,
  .py-md-4 {
    padding-bottom: 1.5rem !important;
  }

  .pl-md-4,
  .px-md-4 {
    padding-left: 1.5rem !important;
  }

  .p-md-5 {
    padding: 3rem !important;
  }

  .pt-md-5,
  .py-md-5 {
    padding-top: 3rem !important;
  }

  .pr-md-5,
  .px-md-5 {
    padding-right: 3rem !important;
  }

  .pb-md-5,
  .py-md-5 {
    padding-bottom: 3rem !important;
  }

  .pl-md-5,
  .px-md-5 {
    padding-left: 3rem !important;
  }

  .p-md-sm {
    padding: 2rem !important;
  }

  .pt-md-sm,
  .py-md-sm {
    padding-top: 2rem !important;
  }

  .pr-md-sm,
  .px-md-sm {
    padding-right: 2rem !important;
  }

  .pb-md-sm,
  .py-md-sm {
    padding-bottom: 2rem !important;
  }

  .pl-md-sm,
  .px-md-sm {
    padding-left: 2rem !important;
  }

  .p-md-md {
    padding: 4rem !important;
  }

  .pt-md-md,
  .py-md-md {
    padding-top: 4rem !important;
  }

  .pr-md-md,
  .px-md-md {
    padding-right: 4rem !important;
  }

  .pb-md-md,
  .py-md-md {
    padding-bottom: 4rem !important;
  }

  .pl-md-md,
  .px-md-md {
    padding-left: 4rem !important;
  }

  .p-md-lg {
    padding: 6rem !important;
  }

  .pt-md-lg,
  .py-md-lg {
    padding-top: 6rem !important;
  }

  .pr-md-lg,
  .px-md-lg {
    padding-right: 6rem !important;
  }

  .pb-md-lg,
  .py-md-lg {
    padding-bottom: 6rem !important;
  }

  .pl-md-lg,
  .px-md-lg {
    padding-left: 6rem !important;
  }

  .p-md-xl {
    padding: 8rem !important;
  }

  .pt-md-xl,
  .py-md-xl {
    padding-top: 8rem !important;
  }

  .pr-md-xl,
  .px-md-xl {
    padding-right: 8rem !important;
  }

  .pb-md-xl,
  .py-md-xl {
    padding-bottom: 8rem !important;
  }

  .pl-md-xl,
  .px-md-xl {
    padding-left: 8rem !important;
  }

  .m-md-n1 {
    margin: -0.25rem !important;
  }

  .mt-md-n1,
  .my-md-n1 {
    margin-top: -0.25rem !important;
  }

  .mr-md-n1,
  .mx-md-n1 {
    margin-right: -0.25rem !important;
  }

  .mb-md-n1,
  .my-md-n1 {
    margin-bottom: -0.25rem !important;
  }

  .ml-md-n1,
  .mx-md-n1 {
    margin-left: -0.25rem !important;
  }

  .m-md-n2 {
    margin: -0.5rem !important;
  }

  .mt-md-n2,
  .my-md-n2 {
    margin-top: -0.5rem !important;
  }

  .mr-md-n2,
  .mx-md-n2 {
    margin-right: -0.5rem !important;
  }

  .mb-md-n2,
  .my-md-n2 {
    margin-bottom: -0.5rem !important;
  }

  .ml-md-n2,
  .mx-md-n2 {
    margin-left: -0.5rem !important;
  }

  .m-md-n3 {
    margin: -1rem !important;
  }

  .mt-md-n3,
  .my-md-n3 {
    margin-top: -1rem !important;
  }

  .mr-md-n3,
  .mx-md-n3 {
    margin-right: -1rem !important;
  }

  .mb-md-n3,
  .my-md-n3 {
    margin-bottom: -1rem !important;
  }

  .ml-md-n3,
  .mx-md-n3 {
    margin-left: -1rem !important;
  }

  .m-md-n4 {
    margin: -1.5rem !important;
  }

  .mt-md-n4,
  .my-md-n4 {
    margin-top: -1.5rem !important;
  }

  .mr-md-n4,
  .mx-md-n4 {
    margin-right: -1.5rem !important;
  }

  .mb-md-n4,
  .my-md-n4 {
    margin-bottom: -1.5rem !important;
  }

  .ml-md-n4,
  .mx-md-n4 {
    margin-left: -1.5rem !important;
  }

  .m-md-n5 {
    margin: -3rem !important;
  }

  .mt-md-n5,
  .my-md-n5 {
    margin-top: -3rem !important;
  }

  .mr-md-n5,
  .mx-md-n5 {
    margin-right: -3rem !important;
  }

  .mb-md-n5,
  .my-md-n5 {
    margin-bottom: -3rem !important;
  }

  .ml-md-n5,
  .mx-md-n5 {
    margin-left: -3rem !important;
  }

  .m-md-nsm {
    margin: -2rem !important;
  }

  .mt-md-nsm,
  .my-md-nsm {
    margin-top: -2rem !important;
  }

  .mr-md-nsm,
  .mx-md-nsm {
    margin-right: -2rem !important;
  }

  .mb-md-nsm,
  .my-md-nsm {
    margin-bottom: -2rem !important;
  }

  .ml-md-nsm,
  .mx-md-nsm {
    margin-left: -2rem !important;
  }

  .m-md-nmd {
    margin: -4rem !important;
  }

  .mt-md-nmd,
  .my-md-nmd {
    margin-top: -4rem !important;
  }

  .mr-md-nmd,
  .mx-md-nmd {
    margin-right: -4rem !important;
  }

  .mb-md-nmd,
  .my-md-nmd {
    margin-bottom: -4rem !important;
  }

  .ml-md-nmd,
  .mx-md-nmd {
    margin-left: -4rem !important;
  }

  .m-md-nlg {
    margin: -6rem !important;
  }

  .mt-md-nlg,
  .my-md-nlg {
    margin-top: -6rem !important;
  }

  .mr-md-nlg,
  .mx-md-nlg {
    margin-right: -6rem !important;
  }

  .mb-md-nlg,
  .my-md-nlg {
    margin-bottom: -6rem !important;
  }

  .ml-md-nlg,
  .mx-md-nlg {
    margin-left: -6rem !important;
  }

  .m-md-nxl {
    margin: -8rem !important;
  }

  .mt-md-nxl,
  .my-md-nxl {
    margin-top: -8rem !important;
  }

  .mr-md-nxl,
  .mx-md-nxl {
    margin-right: -8rem !important;
  }

  .mb-md-nxl,
  .my-md-nxl {
    margin-bottom: -8rem !important;
  }

  .ml-md-nxl,
  .mx-md-nxl {
    margin-left: -8rem !important;
  }

  .m-md-auto {
    margin: auto !important;
  }

  .mt-md-auto,
  .my-md-auto {
    margin-top: auto !important;
  }

  .mr-md-auto,
  .mx-md-auto {
    margin-right: auto !important;
  }

  .mb-md-auto,
  .my-md-auto {
    margin-bottom: auto !important;
  }

  .ml-md-auto,
  .mx-md-auto {
    margin-left: auto !important;
  }
}

@media (min-width: 992px) {
  .m-lg-0 {
    margin: 0 !important;
  }

  .mt-lg-0,
  .my-lg-0 {
    margin-top: 0 !important;
  }

  .mr-lg-0,
  .mx-lg-0 {
    margin-right: 0 !important;
  }

  .mb-lg-0,
  .my-lg-0 {
    margin-bottom: 0 !important;
  }

  .ml-lg-0,
  .mx-lg-0 {
    margin-left: 0 !important;
  }

  .m-lg-1 {
    margin: 0.25rem !important;
  }

  .mt-lg-1,
  .my-lg-1 {
    margin-top: 0.25rem !important;
  }

  .mr-lg-1,
  .mx-lg-1 {
    margin-right: 0.25rem !important;
  }

  .mb-lg-1,
  .my-lg-1 {
    margin-bottom: 0.25rem !important;
  }

  .ml-lg-1,
  .mx-lg-1 {
    margin-left: 0.25rem !important;
  }

  .m-lg-2 {
    margin: 0.5rem !important;
  }

  .mt-lg-2,
  .my-lg-2 {
    margin-top: 0.5rem !important;
  }

  .mr-lg-2,
  .mx-lg-2 {
    margin-right: 0.5rem !important;
  }

  .mb-lg-2,
  .my-lg-2 {
    margin-bottom: 0.5rem !important;
  }

  .ml-lg-2,
  .mx-lg-2 {
    margin-left: 0.5rem !important;
  }

  .m-lg-3 {
    margin: 1rem !important;
  }

  .mt-lg-3,
  .my-lg-3 {
    margin-top: 1rem !important;
  }

  .mr-lg-3,
  .mx-lg-3 {
    margin-right: 1rem !important;
  }

  .mb-lg-3,
  .my-lg-3 {
    margin-bottom: 1rem !important;
  }

  .ml-lg-3,
  .mx-lg-3 {
    margin-left: 1rem !important;
  }

  .m-lg-4 {
    margin: 1.5rem !important;
  }

  .mt-lg-4,
  .my-lg-4 {
    margin-top: 1.5rem !important;
  }

  .mr-lg-4,
  .mx-lg-4 {
    margin-right: 1.5rem !important;
  }

  .mb-lg-4,
  .my-lg-4 {
    margin-bottom: 1.5rem !important;
  }

  .ml-lg-4,
  .mx-lg-4 {
    margin-left: 1.5rem !important;
  }

  .m-lg-5 {
    margin: 3rem !important;
  }

  .mt-lg-5,
  .my-lg-5 {
    margin-top: 3rem !important;
  }

  .mr-lg-5,
  .mx-lg-5 {
    margin-right: 3rem !important;
  }

  .mb-lg-5,
  .my-lg-5 {
    margin-bottom: 3rem !important;
  }

  .ml-lg-5,
  .mx-lg-5 {
    margin-left: 3rem !important;
  }

  .m-lg-sm {
    margin: 2rem !important;
  }

  .mt-lg-sm,
  .my-lg-sm {
    margin-top: 2rem !important;
  }

  .mr-lg-sm,
  .mx-lg-sm {
    margin-right: 2rem !important;
  }

  .mb-lg-sm,
  .my-lg-sm {
    margin-bottom: 2rem !important;
  }

  .ml-lg-sm,
  .mx-lg-sm {
    margin-left: 2rem !important;
  }

  .m-lg-md {
    margin: 4rem !important;
  }

  .mt-lg-md,
  .my-lg-md {
    margin-top: 4rem !important;
  }

  .mr-lg-md,
  .mx-lg-md {
    margin-right: 4rem !important;
  }

  .mb-lg-md,
  .my-lg-md {
    margin-bottom: 4rem !important;
  }

  .ml-lg-md,
  .mx-lg-md {
    margin-left: 4rem !important;
  }

  .m-lg-lg {
    margin: 6rem !important;
  }

  .mt-lg-lg,
  .my-lg-lg {
    margin-top: 6rem !important;
  }

  .mr-lg-lg,
  .mx-lg-lg {
    margin-right: 6rem !important;
  }

  .mb-lg-lg,
  .my-lg-lg {
    margin-bottom: 6rem !important;
  }

  .ml-lg-lg,
  .mx-lg-lg {
    margin-left: 6rem !important;
  }

  .m-lg-xl {
    margin: 8rem !important;
  }

  .mt-lg-xl,
  .my-lg-xl {
    margin-top: 8rem !important;
  }

  .mr-lg-xl,
  .mx-lg-xl {
    margin-right: 8rem !important;
  }

  .mb-lg-xl,
  .my-lg-xl {
    margin-bottom: 8rem !important;
  }

  .ml-lg-xl,
  .mx-lg-xl {
    margin-left: 8rem !important;
  }

  .p-lg-0 {
    padding: 0 !important;
  }

  .pt-lg-0,
  .py-lg-0 {
    padding-top: 0 !important;
  }

  .pr-lg-0,
  .px-lg-0 {
    padding-right: 0 !important;
  }

  .pb-lg-0,
  .py-lg-0 {
    padding-bottom: 0 !important;
  }

  .pl-lg-0,
  .px-lg-0 {
    padding-left: 0 !important;
  }

  .p-lg-1 {
    padding: 0.25rem !important;
  }

  .pt-lg-1,
  .py-lg-1 {
    padding-top: 0.25rem !important;
  }

  .pr-lg-1,
  .px-lg-1 {
    padding-right: 0.25rem !important;
  }

  .pb-lg-1,
  .py-lg-1 {
    padding-bottom: 0.25rem !important;
  }

  .pl-lg-1,
  .px-lg-1 {
    padding-left: 0.25rem !important;
  }

  .p-lg-2 {
    padding: 0.5rem !important;
  }

  .pt-lg-2,
  .py-lg-2 {
    padding-top: 0.5rem !important;
  }

  .pr-lg-2,
  .px-lg-2 {
    padding-right: 0.5rem !important;
  }

  .pb-lg-2,
  .py-lg-2 {
    padding-bottom: 0.5rem !important;
  }

  .pl-lg-2,
  .px-lg-2 {
    padding-left: 0.5rem !important;
  }

  .p-lg-3 {
    padding: 1rem !important;
  }

  .pt-lg-3,
  .py-lg-3 {
    padding-top: 1rem !important;
  }

  .pr-lg-3,
  .px-lg-3 {
    padding-right: 1rem !important;
  }

  .pb-lg-3,
  .py-lg-3 {
    padding-bottom: 1rem !important;
  }

  .pl-lg-3,
  .px-lg-3 {
    padding-left: 1rem !important;
  }

  .p-lg-4 {
    padding: 1.5rem !important;
  }

  .pt-lg-4,
  .py-lg-4 {
    padding-top: 1.5rem !important;
  }

  .pr-lg-4,
  .px-lg-4 {
    padding-right: 1.5rem !important;
  }

  .pb-lg-4,
  .py-lg-4 {
    padding-bottom: 1.5rem !important;
  }

  .pl-lg-4,
  .px-lg-4 {
    padding-left: 1.5rem !important;
  }

  .p-lg-5 {
    padding: 3rem !important;
  }

  .pt-lg-5,
  .py-lg-5 {
    padding-top: 3rem !important;
  }

  .pr-lg-5,
  .px-lg-5 {
    padding-right: 3rem !important;
  }

  .pb-lg-5,
  .py-lg-5 {
    padding-bottom: 3rem !important;
  }

  .pl-lg-5,
  .px-lg-5 {
    padding-left: 3rem !important;
  }

  .p-lg-sm {
    padding: 2rem !important;
  }

  .pt-lg-sm,
  .py-lg-sm {
    padding-top: 2rem !important;
  }

  .pr-lg-sm,
  .px-lg-sm {
    padding-right: 2rem !important;
  }

  .pb-lg-sm,
  .py-lg-sm {
    padding-bottom: 2rem !important;
  }

  .pl-lg-sm,
  .px-lg-sm {
    padding-left: 2rem !important;
  }

  .p-lg-md {
    padding: 4rem !important;
  }

  .pt-lg-md,
  .py-lg-md {
    padding-top: 4rem !important;
  }

  .pr-lg-md,
  .px-lg-md {
    padding-right: 4rem !important;
  }

  .pb-lg-md,
  .py-lg-md {
    padding-bottom: 4rem !important;
  }

  .pl-lg-md,
  .px-lg-md {
    padding-left: 4rem !important;
  }

  .p-lg-lg {
    padding: 6rem !important;
  }

  .pt-lg-lg,
  .py-lg-lg {
    padding-top: 6rem !important;
  }

  .pr-lg-lg,
  .px-lg-lg {
    padding-right: 6rem !important;
  }

  .pb-lg-lg,
  .py-lg-lg {
    padding-bottom: 6rem !important;
  }

  .pl-lg-lg,
  .px-lg-lg {
    padding-left: 6rem !important;
  }

  .p-lg-xl {
    padding: 8rem !important;
  }

  .pt-lg-xl,
  .py-lg-xl {
    padding-top: 8rem !important;
  }

  .pr-lg-xl,
  .px-lg-xl {
    padding-right: 8rem !important;
  }

  .pb-lg-xl,
  .py-lg-xl {
    padding-bottom: 8rem !important;
  }

  .pl-lg-xl,
  .px-lg-xl {
    padding-left: 8rem !important;
  }

  .m-lg-n1 {
    margin: -0.25rem !important;
  }

  .mt-lg-n1,
  .my-lg-n1 {
    margin-top: -0.25rem !important;
  }

  .mr-lg-n1,
  .mx-lg-n1 {
    margin-right: -0.25rem !important;
  }

  .mb-lg-n1,
  .my-lg-n1 {
    margin-bottom: -0.25rem !important;
  }

  .ml-lg-n1,
  .mx-lg-n1 {
    margin-left: -0.25rem !important;
  }

  .m-lg-n2 {
    margin: -0.5rem !important;
  }

  .mt-lg-n2,
  .my-lg-n2 {
    margin-top: -0.5rem !important;
  }

  .mr-lg-n2,
  .mx-lg-n2 {
    margin-right: -0.5rem !important;
  }

  .mb-lg-n2,
  .my-lg-n2 {
    margin-bottom: -0.5rem !important;
  }

  .ml-lg-n2,
  .mx-lg-n2 {
    margin-left: -0.5rem !important;
  }

  .m-lg-n3 {
    margin: -1rem !important;
  }

  .mt-lg-n3,
  .my-lg-n3 {
    margin-top: -1rem !important;
  }

  .mr-lg-n3,
  .mx-lg-n3 {
    margin-right: -1rem !important;
  }

  .mb-lg-n3,
  .my-lg-n3 {
    margin-bottom: -1rem !important;
  }

  .ml-lg-n3,
  .mx-lg-n3 {
    margin-left: -1rem !important;
  }

  .m-lg-n4 {
    margin: -1.5rem !important;
  }

  .mt-lg-n4,
  .my-lg-n4 {
    margin-top: -1.5rem !important;
  }

  .mr-lg-n4,
  .mx-lg-n4 {
    margin-right: -1.5rem !important;
  }

  .mb-lg-n4,
  .my-lg-n4 {
    margin-bottom: -1.5rem !important;
  }

  .ml-lg-n4,
  .mx-lg-n4 {
    margin-left: -1.5rem !important;
  }

  .m-lg-n5 {
    margin: -3rem !important;
  }

  .mt-lg-n5,
  .my-lg-n5 {
    margin-top: -3rem !important;
  }

  .mr-lg-n5,
  .mx-lg-n5 {
    margin-right: -3rem !important;
  }

  .mb-lg-n5,
  .my-lg-n5 {
    margin-bottom: -3rem !important;
  }

  .ml-lg-n5,
  .mx-lg-n5 {
    margin-left: -3rem !important;
  }

  .m-lg-nsm {
    margin: -2rem !important;
  }

  .mt-lg-nsm,
  .my-lg-nsm {
    margin-top: -2rem !important;
  }

  .mr-lg-nsm,
  .mx-lg-nsm {
    margin-right: -2rem !important;
  }

  .mb-lg-nsm,
  .my-lg-nsm {
    margin-bottom: -2rem !important;
  }

  .ml-lg-nsm,
  .mx-lg-nsm {
    margin-left: -2rem !important;
  }

  .m-lg-nmd {
    margin: -4rem !important;
  }

  .mt-lg-nmd,
  .my-lg-nmd {
    margin-top: -4rem !important;
  }

  .mr-lg-nmd,
  .mx-lg-nmd {
    margin-right: -4rem !important;
  }

  .mb-lg-nmd,
  .my-lg-nmd {
    margin-bottom: -4rem !important;
  }

  .ml-lg-nmd,
  .mx-lg-nmd {
    margin-left: -4rem !important;
  }

  .m-lg-nlg {
    margin: -6rem !important;
  }

  .mt-lg-nlg,
  .my-lg-nlg {
    margin-top: -6rem !important;
  }

  .mr-lg-nlg,
  .mx-lg-nlg {
    margin-right: -6rem !important;
  }

  .mb-lg-nlg,
  .my-lg-nlg {
    margin-bottom: -6rem !important;
  }

  .ml-lg-nlg,
  .mx-lg-nlg {
    margin-left: -6rem !important;
  }

  .m-lg-nxl {
    margin: -8rem !important;
  }

  .mt-lg-nxl,
  .my-lg-nxl {
    margin-top: -8rem !important;
  }

  .mr-lg-nxl,
  .mx-lg-nxl {
    margin-right: -8rem !important;
  }

  .mb-lg-nxl,
  .my-lg-nxl {
    margin-bottom: -8rem !important;
  }

  .ml-lg-nxl,
  .mx-lg-nxl {
    margin-left: -8rem !important;
  }

  .m-lg-auto {
    margin: auto !important;
  }

  .mt-lg-auto,
  .my-lg-auto {
    margin-top: auto !important;
  }

  .mr-lg-auto,
  .mx-lg-auto {
    margin-right: auto !important;
  }

  .mb-lg-auto,
  .my-lg-auto {
    margin-bottom: auto !important;
  }

  .ml-lg-auto,
  .mx-lg-auto {
    margin-left: auto !important;
  }
}

@media (min-width: 1200px) {
  .m-xl-0 {
    margin: 0 !important;
  }

  .mt-xl-0,
  .my-xl-0 {
    margin-top: 0 !important;
  }

  .mr-xl-0,
  .mx-xl-0 {
    margin-right: 0 !important;
  }

  .mb-xl-0,
  .my-xl-0 {
    margin-bottom: 0 !important;
  }

  .ml-xl-0,
  .mx-xl-0 {
    margin-left: 0 !important;
  }

  .m-xl-1 {
    margin: 0.25rem !important;
  }

  .mt-xl-1,
  .my-xl-1 {
    margin-top: 0.25rem !important;
  }

  .mr-xl-1,
  .mx-xl-1 {
    margin-right: 0.25rem !important;
  }

  .mb-xl-1,
  .my-xl-1 {
    margin-bottom: 0.25rem !important;
  }

  .ml-xl-1,
  .mx-xl-1 {
    margin-left: 0.25rem !important;
  }

  .m-xl-2 {
    margin: 0.5rem !important;
  }

  .mt-xl-2,
  .my-xl-2 {
    margin-top: 0.5rem !important;
  }

  .mr-xl-2,
  .mx-xl-2 {
    margin-right: 0.5rem !important;
  }

  .mb-xl-2,
  .my-xl-2 {
    margin-bottom: 0.5rem !important;
  }

  .ml-xl-2,
  .mx-xl-2 {
    margin-left: 0.5rem !important;
  }

  .m-xl-3 {
    margin: 1rem !important;
  }

  .mt-xl-3,
  .my-xl-3 {
    margin-top: 1rem !important;
  }

  .mr-xl-3,
  .mx-xl-3 {
    margin-right: 1rem !important;
  }

  .mb-xl-3,
  .my-xl-3 {
    margin-bottom: 1rem !important;
  }

  .ml-xl-3,
  .mx-xl-3 {
    margin-left: 1rem !important;
  }

  .m-xl-4 {
    margin: 1.5rem !important;
  }

  .mt-xl-4,
  .my-xl-4 {
    margin-top: 1.5rem !important;
  }

  .mr-xl-4,
  .mx-xl-4 {
    margin-right: 1.5rem !important;
  }

  .mb-xl-4,
  .my-xl-4 {
    margin-bottom: 1.5rem !important;
  }

  .ml-xl-4,
  .mx-xl-4 {
    margin-left: 1.5rem !important;
  }

  .m-xl-5 {
    margin: 3rem !important;
  }

  .mt-xl-5,
  .my-xl-5 {
    margin-top: 3rem !important;
  }

  .mr-xl-5,
  .mx-xl-5 {
    margin-right: 3rem !important;
  }

  .mb-xl-5,
  .my-xl-5 {
    margin-bottom: 3rem !important;
  }

  .ml-xl-5,
  .mx-xl-5 {
    margin-left: 3rem !important;
  }

  .m-xl-sm {
    margin: 2rem !important;
  }

  .mt-xl-sm,
  .my-xl-sm {
    margin-top: 2rem !important;
  }

  .mr-xl-sm,
  .mx-xl-sm {
    margin-right: 2rem !important;
  }

  .mb-xl-sm,
  .my-xl-sm {
    margin-bottom: 2rem !important;
  }

  .ml-xl-sm,
  .mx-xl-sm {
    margin-left: 2rem !important;
  }

  .m-xl-md {
    margin: 4rem !important;
  }

  .mt-xl-md,
  .my-xl-md {
    margin-top: 4rem !important;
  }

  .mr-xl-md,
  .mx-xl-md {
    margin-right: 4rem !important;
  }

  .mb-xl-md,
  .my-xl-md {
    margin-bottom: 4rem !important;
  }

  .ml-xl-md,
  .mx-xl-md {
    margin-left: 4rem !important;
  }

  .m-xl-lg {
    margin: 6rem !important;
  }

  .mt-xl-lg,
  .my-xl-lg {
    margin-top: 6rem !important;
  }

  .mr-xl-lg,
  .mx-xl-lg {
    margin-right: 6rem !important;
  }

  .mb-xl-lg,
  .my-xl-lg {
    margin-bottom: 6rem !important;
  }

  .ml-xl-lg,
  .mx-xl-lg {
    margin-left: 6rem !important;
  }

  .m-xl-xl {
    margin: 8rem !important;
  }

  .mt-xl-xl,
  .my-xl-xl {
    margin-top: 8rem !important;
  }

  .mr-xl-xl,
  .mx-xl-xl {
    margin-right: 8rem !important;
  }

  .mb-xl-xl,
  .my-xl-xl {
    margin-bottom: 8rem !important;
  }

  .ml-xl-xl,
  .mx-xl-xl {
    margin-left: 8rem !important;
  }

  .p-xl-0 {
    padding: 0 !important;
  }

  .pt-xl-0,
  .py-xl-0 {
    padding-top: 0 !important;
  }

  .pr-xl-0,
  .px-xl-0 {
    padding-right: 0 !important;
  }

  .pb-xl-0,
  .py-xl-0 {
    padding-bottom: 0 !important;
  }

  .pl-xl-0,
  .px-xl-0 {
    padding-left: 0 !important;
  }

  .p-xl-1 {
    padding: 0.25rem !important;
  }

  .pt-xl-1,
  .py-xl-1 {
    padding-top: 0.25rem !important;
  }

  .pr-xl-1,
  .px-xl-1 {
    padding-right: 0.25rem !important;
  }

  .pb-xl-1,
  .py-xl-1 {
    padding-bottom: 0.25rem !important;
  }

  .pl-xl-1,
  .px-xl-1 {
    padding-left: 0.25rem !important;
  }

  .p-xl-2 {
    padding: 0.5rem !important;
  }

  .pt-xl-2,
  .py-xl-2 {
    padding-top: 0.5rem !important;
  }

  .pr-xl-2,
  .px-xl-2 {
    padding-right: 0.5rem !important;
  }

  .pb-xl-2,
  .py-xl-2 {
    padding-bottom: 0.5rem !important;
  }

  .pl-xl-2,
  .px-xl-2 {
    padding-left: 0.5rem !important;
  }

  .p-xl-3 {
    padding: 1rem !important;
  }

  .pt-xl-3,
  .py-xl-3 {
    padding-top: 1rem !important;
  }

  .pr-xl-3,
  .px-xl-3 {
    padding-right: 1rem !important;
  }

  .pb-xl-3,
  .py-xl-3 {
    padding-bottom: 1rem !important;
  }

  .pl-xl-3,
  .px-xl-3 {
    padding-left: 1rem !important;
  }

  .p-xl-4 {
    padding: 1.5rem !important;
  }

  .pt-xl-4,
  .py-xl-4 {
    padding-top: 1.5rem !important;
  }

  .pr-xl-4,
  .px-xl-4 {
    padding-right: 1.5rem !important;
  }

  .pb-xl-4,
  .py-xl-4 {
    padding-bottom: 1.5rem !important;
  }

  .pl-xl-4,
  .px-xl-4 {
    padding-left: 1.5rem !important;
  }

  .p-xl-5 {
    padding: 3rem !important;
  }

  .pt-xl-5,
  .py-xl-5 {
    padding-top: 3rem !important;
  }

  .pr-xl-5,
  .px-xl-5 {
    padding-right: 3rem !important;
  }

  .pb-xl-5,
  .py-xl-5 {
    padding-bottom: 3rem !important;
  }

  .pl-xl-5,
  .px-xl-5 {
    padding-left: 3rem !important;
  }

  .p-xl-sm {
    padding: 2rem !important;
  }

  .pt-xl-sm,
  .py-xl-sm {
    padding-top: 2rem !important;
  }

  .pr-xl-sm,
  .px-xl-sm {
    padding-right: 2rem !important;
  }

  .pb-xl-sm,
  .py-xl-sm {
    padding-bottom: 2rem !important;
  }

  .pl-xl-sm,
  .px-xl-sm {
    padding-left: 2rem !important;
  }

  .p-xl-md {
    padding: 4rem !important;
  }

  .pt-xl-md,
  .py-xl-md {
    padding-top: 4rem !important;
  }

  .pr-xl-md,
  .px-xl-md {
    padding-right: 4rem !important;
  }

  .pb-xl-md,
  .py-xl-md {
    padding-bottom: 4rem !important;
  }

  .pl-xl-md,
  .px-xl-md {
    padding-left: 4rem !important;
  }

  .p-xl-lg {
    padding: 6rem !important;
  }

  .pt-xl-lg,
  .py-xl-lg {
    padding-top: 6rem !important;
  }

  .pr-xl-lg,
  .px-xl-lg {
    padding-right: 6rem !important;
  }

  .pb-xl-lg,
  .py-xl-lg {
    padding-bottom: 6rem !important;
  }

  .pl-xl-lg,
  .px-xl-lg {
    padding-left: 6rem !important;
  }

  .p-xl-xl {
    padding: 8rem !important;
  }

  .pt-xl-xl,
  .py-xl-xl {
    padding-top: 8rem !important;
  }

  .pr-xl-xl,
  .px-xl-xl {
    padding-right: 8rem !important;
  }

  .pb-xl-xl,
  .py-xl-xl {
    padding-bottom: 8rem !important;
  }

  .pl-xl-xl,
  .px-xl-xl {
    padding-left: 8rem !important;
  }

  .m-xl-n1 {
    margin: -0.25rem !important;
  }

  .mt-xl-n1,
  .my-xl-n1 {
    margin-top: -0.25rem !important;
  }

  .mr-xl-n1,
  .mx-xl-n1 {
    margin-right: -0.25rem !important;
  }

  .mb-xl-n1,
  .my-xl-n1 {
    margin-bottom: -0.25rem !important;
  }

  .ml-xl-n1,
  .mx-xl-n1 {
    margin-left: -0.25rem !important;
  }

  .m-xl-n2 {
    margin: -0.5rem !important;
  }

  .mt-xl-n2,
  .my-xl-n2 {
    margin-top: -0.5rem !important;
  }

  .mr-xl-n2,
  .mx-xl-n2 {
    margin-right: -0.5rem !important;
  }

  .mb-xl-n2,
  .my-xl-n2 {
    margin-bottom: -0.5rem !important;
  }

  .ml-xl-n2,
  .mx-xl-n2 {
    margin-left: -0.5rem !important;
  }

  .m-xl-n3 {
    margin: -1rem !important;
  }

  .mt-xl-n3,
  .my-xl-n3 {
    margin-top: -1rem !important;
  }

  .mr-xl-n3,
  .mx-xl-n3 {
    margin-right: -1rem !important;
  }

  .mb-xl-n3,
  .my-xl-n3 {
    margin-bottom: -1rem !important;
  }

  .ml-xl-n3,
  .mx-xl-n3 {
    margin-left: -1rem !important;
  }

  .m-xl-n4 {
    margin: -1.5rem !important;
  }

  .mt-xl-n4,
  .my-xl-n4 {
    margin-top: -1.5rem !important;
  }

  .mr-xl-n4,
  .mx-xl-n4 {
    margin-right: -1.5rem !important;
  }

  .mb-xl-n4,
  .my-xl-n4 {
    margin-bottom: -1.5rem !important;
  }

  .ml-xl-n4,
  .mx-xl-n4 {
    margin-left: -1.5rem !important;
  }

  .m-xl-n5 {
    margin: -3rem !important;
  }

  .mt-xl-n5,
  .my-xl-n5 {
    margin-top: -3rem !important;
  }

  .mr-xl-n5,
  .mx-xl-n5 {
    margin-right: -3rem !important;
  }

  .mb-xl-n5,
  .my-xl-n5 {
    margin-bottom: -3rem !important;
  }

  .ml-xl-n5,
  .mx-xl-n5 {
    margin-left: -3rem !important;
  }

  .m-xl-nsm {
    margin: -2rem !important;
  }

  .mt-xl-nsm,
  .my-xl-nsm {
    margin-top: -2rem !important;
  }

  .mr-xl-nsm,
  .mx-xl-nsm {
    margin-right: -2rem !important;
  }

  .mb-xl-nsm,
  .my-xl-nsm {
    margin-bottom: -2rem !important;
  }

  .ml-xl-nsm,
  .mx-xl-nsm {
    margin-left: -2rem !important;
  }

  .m-xl-nmd {
    margin: -4rem !important;
  }

  .mt-xl-nmd,
  .my-xl-nmd {
    margin-top: -4rem !important;
  }

  .mr-xl-nmd,
  .mx-xl-nmd {
    margin-right: -4rem !important;
  }

  .mb-xl-nmd,
  .my-xl-nmd {
    margin-bottom: -4rem !important;
  }

  .ml-xl-nmd,
  .mx-xl-nmd {
    margin-left: -4rem !important;
  }

  .m-xl-nlg {
    margin: -6rem !important;
  }

  .mt-xl-nlg,
  .my-xl-nlg {
    margin-top: -6rem !important;
  }

  .mr-xl-nlg,
  .mx-xl-nlg {
    margin-right: -6rem !important;
  }

  .mb-xl-nlg,
  .my-xl-nlg {
    margin-bottom: -6rem !important;
  }

  .ml-xl-nlg,
  .mx-xl-nlg {
    margin-left: -6rem !important;
  }

  .m-xl-nxl {
    margin: -8rem !important;
  }

  .mt-xl-nxl,
  .my-xl-nxl {
    margin-top: -8rem !important;
  }

  .mr-xl-nxl,
  .mx-xl-nxl {
    margin-right: -8rem !important;
  }

  .mb-xl-nxl,
  .my-xl-nxl {
    margin-bottom: -8rem !important;
  }

  .ml-xl-nxl,
  .mx-xl-nxl {
    margin-left: -8rem !important;
  }

  .m-xl-auto {
    margin: auto !important;
  }

  .mt-xl-auto,
  .my-xl-auto {
    margin-top: auto !important;
  }

  .mr-xl-auto,
  .mx-xl-auto {
    margin-right: auto !important;
  }

  .mb-xl-auto,
  .my-xl-auto {
    margin-bottom: auto !important;
  }

  .ml-xl-auto,
  .mx-xl-auto {
    margin-left: auto !important;
  }
}

.text-monospace {
  font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important;
}

.text-justify {
  text-align: justify !important;
}

.text-wrap {
  white-space: normal !important;
}

.text-nowrap {
  white-space: nowrap !important;
}

.text-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.text-left {
  text-align: left !important;
}

.text-right {
  text-align: right !important;
}

.text-center {
  text-align: center !important;
}

@media (min-width: 576px) {
  .text-sm-left {
    text-align: left !important;
  }

  .text-sm-right {
    text-align: right !important;
  }

  .text-sm-center {
    text-align: center !important;
  }
}

@media (min-width: 768px) {
  .text-md-left {
    text-align: left !important;
  }

  .text-md-right {
    text-align: right !important;
  }

  .text-md-center {
    text-align: center !important;
  }
}

@media (min-width: 992px) {
  .text-lg-left {
    text-align: left !important;
  }

  .text-lg-right {
    text-align: right !important;
  }

  .text-lg-center {
    text-align: center !important;
  }
}

@media (min-width: 1200px) {
  .text-xl-left {
    text-align: left !important;
  }

  .text-xl-right {
    text-align: right !important;
  }

  .text-xl-center {
    text-align: center !important;
  }
}

.text-lowercase {
  text-transform: lowercase !important;
}

.text-uppercase {
  text-transform: uppercase !important;
}

.text-capitalize {
  text-transform: capitalize !important;
}

.font-weight-light {
  font-weight: 300 !important;
}

.font-weight-lighter {
  font-weight: lighter !important;
}

.font-weight-normal {
  font-weight: 400 !important;
}

.font-weight-bold {
  font-weight: 600 !important;
}

.font-weight-bolder {
  font-weight: bolder !important;
}

.font-italic {
  font-style: italic !important;
}


.text-primary {
  color: var(--accent-primary) !important;
}

a.text-primary:hover,
a.text-primary:focus {
  color: var(--accent-primary-hover) !important;
}

.text-danger {
  color: var(--accent-brand) !important;
}

a.text-danger:hover,
a.text-danger:focus {
  color: #ff5252 !important; /* Versión más clara del rojo para hover */
}

/* Mapeo de variantes de estado a colores semánticos */
.text-success {
  color: var(--accent-primary) !important;
}

a.text-success:hover,
a.text-success:focus {
  color: var(--accent-primary-hover) !important;
}

.text-info {
  color: var(--accent-secondary) !important; /* Usando el acento secundario para 'info' */
}

.text-warning {
  color: #fb6340 !important; /* Mantenemos un color específico para advertencias si es necesario */
}

/* Utilidades de texto primario y secundario del tema */
.text-body {
  color: var(--text-primary) !important; /* Mejor práctica para texto principal */
}

.text-muted {
  color: var(--text-secondary) !important;
}



.text-secondary { color: var(--text-secondary) !important; }
.text-light { color: var(--text-secondary) !important; opacity: 0.8; }
.text-default { color: var(--text-secondary) !important; }
.text-neutral { color: var(--text-primary) !important; }
.text-darker { color: #000000 !important; }



.text-black-50 {
  color: rgba(29, 37, 59, 0.5) !important;
}

.text-white-50 {
  color: rgba(255, 255, 255, 0.5) !important;
}



.text-hide {
  font: 0/0 a;
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;
}

.text-decoration-none {
  text-decoration: none !important;
}

.text-break {
  word-break: break-word !important;
  overflow-wrap: break-word !important;
}

.text-reset {
  color: inherit !important;
}

.visible {
  visibility: visible !important;
}

.invisible {
  visibility: hidden !important;
}



@media print {
  *,
  *::before,
  *::after {
    text-shadow: none !important;
    box-shadow: none !important;
  }

  a:not(.btn) {
    text-decoration: underline;
  }

  abbr[title]::after {
    content: " (" attr(title) ")";
  }

  pre {
    white-space: pre-wrap !important;
  }

  pre,
  blockquote {
    border: 1px solid #adb5bd;
    page-break-inside: avoid;
  }

  thead {
    display: table-header-group;
  }

  tr,
  img {
    page-break-inside: avoid;
  }

  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }

  h2,
  h3 {
    page-break-after: avoid;
  }

  @page {
    size: a3;
  }

  body {
    min-width: 992px !important;
    background: #ffffff !important; /* Asegurar fondo blanco para impresión */
  }

  .container {
    min-width: 992px !important;
  }

  .navbar {
    display: none;
  }

  .badge {
    border: 1px solid #000;
  }
}

@media print {
  .table {
    border-collapse: collapse !important;
  }

  .table td,
  .table th {
    background-color: #ffffff !important;
  }

  .table-bordered th,
  .table-bordered td {
    border: 1px solid #dee2e6 !important; /* Usando un color de borde estándar para impresión */
  }

  .table-dark {
    color: inherit;
  }

  .table-dark th,
  .table-dark td,
  .table-dark thead th,
  .table-dark tbody + tbody {
    border-color: #dee2e6;
  }

  .table .thead-dark th {
    color: inherit;
    border-color: #dee2e6;
  }
}

/* --- Estilos Específicos para Notificaciones/Alertas --- */

.alert {
  /* Aplicando el estilo Glassmorphism base */
  position: relative;
  padding: 1rem 1.25rem;
  margin-bottom: 1rem;
  border: 1px solid var(--surface-border);
  border-radius: 0.75rem;
  color: var(--text-primary);
  background-color: var(--surface-color);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  box-shadow: 0 4px 20px 0 var(--shadow-color);
}

.alert .alert-link {
  color: var(--accent-primary);
  font-weight: 600;
}

.alert.alert-success {
  color: #ffffff; /* Forzar blanco para alto contraste */
  background-color: rgba(48, 240, 192, 0.2);
  border-color: rgba(48, 240, 192, 0.4);
  box-shadow: 0 4px 20px 0 var(--shadow-color), 0 0 15px rgba(48, 240, 192, 0.3);
}

.alert i.fa,
.alert i.tim-icons {
  font-size: 1.25rem; /* Iconos ligeramente más grandes */
  line-height: 1;
}

.alert .close {
  color: var(--text-secondary);
  opacity: 0.8;
  text-shadow: none;
  line-height: 1;
  outline: 0;
  transition: color 0.15s ease-in-out;
}

.alert .close:hover {
    color: var(--text-primary);
    opacity: 1;
}

/* Estructura para Alertas con Icono a la Izquierda */
.alert.alert-with-icon {
  padding-left: 65px;
}

.alert span[data-notify="icon"] {
  font-size: 22px;
  display: block;
  left: 20px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  margin-top: 0; /* Reseteo de margen */
  color: inherit; /* Hereda el color del .alert (ej. --accent-primary en .alert-success) */
}

/* Posicionamiento del botón de cierre */
.alert button.close {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  margin-top: 0; /* Reseteo de margen */
  width: auto;
  height: auto;
  padding: 0;
}

.alert .close ~ span {
  display: block;
  max-width: 100%; /* Ajuste para el nuevo posicionamiento del botón */
}

.alert-dismissible {
  padding-right: 3.5rem; /* Espacio consistente para el botón de cierre */
}

.alert-dismissible .close {
  top: 50%;
  right: 1.25rem;
  padding: 0;
  transform: translateY(-50%);
  color: var(--text-secondary);
  opacity: 0.8;
}

.alert-dismissible .close:hover,
.alert-dismissible .close:focus {
  color: var(--text-primary);
  opacity: 1 !important;
}

@media (max-width: 575.98px) {
  .alert-dismissible .close {
    top: 1rem;
    right: 1rem;
    transform: none; /* Resetear transformación en móvil si es necesario */
  }
}

.alert-dismissible .close > span:not(.sr-only) {
  font-size: 1.5rem;
  font-weight: 700;
  background-color: transparent;
  color: inherit; /* Heredar color para consistencia */
}

/* =================================================================================
   15. SOBREESCRITURAS Y VARIANTES DE BOTONES
   Unificando estilos de gradiente, link, simple e icono con el nuevo sistema.
================================================================================= */

/* --- Estilos Adicionales y Unificación --- */

.btn,
.navbar .navbar-nav > a.btn {
  /* Estas propiedades ya están en la base de .btn, pero se reafirman para asegurar la sobreescritura */
  position: relative;
  overflow: hidden;
  margin: 4px 1px;
  cursor: pointer;
  border: 1px solid var(--surface-border);
  background-color: rgba(255, 255, 255, 0.05);
  transition: all 0.2s ease-in-out;
  box-shadow: none; /* Se elimina el box-shadow por defecto y se aplica en :hover */
  color: var(--text-primary);
}

.btn:hover,
.navbar .navbar-nav > a.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 20px 0 var(--shadow-color);
}

.btn:focus,
.navbar .navbar-nav > a.btn:focus {
  outline: 0 !important;
  box-shadow: 0 0 0 2px var(--accent-primary);
}

.btn:active,
.navbar .navbar-nav > a.btn:active {
  box-shadow: none !important;
  transform: translateY(0) !important;
  transition: all .15s ease;
}

/* --- Botón de Contorno (Outline) --- */
.btn.btn-simple,
.navbar .navbar-nav > a.btn.btn-simple {
  background-color: transparent;
  border: 1px solid var(--accent-primary);
  color: var(--accent-primary);
}

.btn.btn-simple:hover,
.btn.btn-simple:focus,
.btn.btn-simple:active,
.btn.btn-simple:not(:disabled):not(.disabled):active {
  background-color: var(--accent-primary) !important;
  border-color: var(--accent-primary) !important;
  color: #000 !important; /* Texto oscuro para contraste */
  box-shadow: var(--accent-glow) !important;
}
[data-theme="light"] .btn.btn-simple:hover,
[data-theme="light"] .btn.btn-simple:focus,
[data-theme="light"] .btn.btn-simple:active {
    color: #fff !important; /* Texto blanco en tema claro */
}


/* --- Botón de Texto (Link) --- */
.btn.btn-link,
.navbar .navbar-nav > a.btn.btn-link {
  color: var(--accent-primary);
  background-color: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  text-decoration: none;
}

.btn.btn-link:hover,
.btn.btn-link:focus,
.btn.btn-link:active {
  color: var(--accent-primary-hover) !important;
  transform: none !important;
  text-decoration: none;
}


/* --- Botón de Icono --- */
.btn.btn-icon,
.navbar .navbar-nav > a.btn.btn-icon {
  height: 2.5rem;   /* 40px */
  min-width: 2.5rem;
  width: 2.5rem;
  padding: 0;
  border-radius: 50%; /* Círculo perfecto */
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn.btn-icon .tim-icons,
.btn.btn-icon .fa,
.btn.btn-icon .far,
.btn.btn-icon .fas {
  font-size: 1rem;
}

.btn.btn-icon.btn-sm,
.btn-group-sm > .btn.btn-icon {
  height: 2rem; /* 32px */
  min-width: 2rem;
  width: 2rem;
}
.btn.btn-icon.btn-sm .tim-icons, .btn.btn-icon.btn-sm .fa { font-size: 0.875rem; }


.btn.btn-icon.btn-lg,
.btn-group-lg > .btn.btn-icon {
  height: 3.5rem; /* 56px */
  min-width: 3.5rem;
  width: 3.5rem;
}
.btn.btn-icon.btn-lg .tim-icons, .btn.btn-icon.btn-lg .fa { font-size: 1.5rem; }

.btn:not(.btn-icon) .tim-icons {
  position: relative;
  top: 1px;
}


/* --- Manejo de Badges y Spans dentro de botones --- */
.btn .badge,
.navbar .navbar-nav > a.btn .badge {
  margin: 0;
}

.btn span,
.navbar .navbar-nav > a.btn span {
  position: relative;
  display: block;
}


/* --- Botón Primario (Refuerzo de Estilos) --- */
/* Esta sección asegura que la variante .btn-primary mantenga su estilo único */
.btn-primary {
  background: var(--accent-primary);
  border-color: var(--accent-primary);
  box-shadow: var(--accent-glow);
  color: #000;
}

[data-theme="light"] .btn-primary {
    color: #fff;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active {
  background-color: var(--accent-primary-hover) !important;
  border-color: var(--accent-primary-hover) !important;
  color: #000 !important;
  box-shadow: var(--accent-glow) !important;
}

[data-theme="light"] .btn-primary:hover,
[data-theme="light"] .btn-primary:focus,
[data-theme="light"] .btn-primary:active {
    color: #fff !important;
}

.btn-primary.disabled,
.btn-primary:disabled {
  background-color: var(--accent-primary);
  border-color: var(--accent-primary);
  opacity: 0.5;
}

.btn-primary.btn-simple {
  color: var(--accent-primary) !important;
  border-color: var(--accent-primary) !important;
  background: transparent !important;
  box-shadow: none !important;
}

.btn-primary.btn-simple:hover,
.btn-primary.btn-simple:focus,
.btn-primary.btn-simple:active {
  color: #000 !important;
  background-color: var(--accent-primary) !important;
  box-shadow: var(--accent-glow) !important;
}
[data-theme="light"] .btn-primary.btn-simple:hover {
    color: #fff !important;
}

.btn-primary.btn-link {
  color: var(--accent-primary) !important;
}

.btn-primary.btn-link:hover,
.btn-primary.btn-link:focus,
.btn-primary.btn-link:active {
  color: var(--accent-primary-hover) !important;
}



/* =================================================================================
   16. SOBREESCRITURAS DE BOTONES (CONTINUACIÓN)
   Mapeo de variantes de color a los nuevos estilos semánticos.
================================================================================= */

/* --- Botón de Éxito (Mapeado a .btn-primary) --- */
.btn-success {
  color: #000; /* Texto oscuro para contraste */
  background-color: var(--accent-primary);
  border-color: var(--accent-primary);
  box-shadow: var(--accent-glow);
}
[data-theme="light"] .btn-success {
    color: #fff;
}

.btn-success:hover,
.btn-success:focus,
.btn-success:active,
.btn-success.active,
.btn-success:active:focus,
.btn-success:active:hover,
.btn-success.active:focus,
.btn-success.active:hover {
  color: #000 !important;
  background-color: var(--accent-primary-hover) !important;
  border-color: var(--accent-primary-hover) !important;
  box-shadow: 0 0 20px var(--accent-primary) !important; /* Brillo intensificado */
}
[data-theme="light"] .btn-success:hover,
[data-theme="light"] .btn-success:focus,
[data-theme="light"] .btn-success:active {
    color: #fff !important;
}

.btn-success:active {
  transform: translateY(0) !important;
  box-shadow: none !important;
}

.btn-success.disabled,
.btn-success:disabled,
.btn-success[disabled] {
  background-color: var(--accent-primary);
  border-color: var(--accent-primary);
  opacity: 0.5;
}

.btn-success.btn-simple {
  color: var(--accent-primary) !important;
  border-color: var(--accent-primary) !important;
  background: transparent !important;
  box-shadow: none !important;
}

.btn-success.btn-simple:hover,
.btn-success.btn-simple:focus,
.btn-success.btn-simple:active,
.btn-success.btn-simple.active {
  color: #000 !important;
  background-color: var(--accent-primary) !important;
  box-shadow: var(--accent-glow) !important;
}
[data-theme="light"] .btn-success.btn-simple:hover,
[data-theme="light"] .btn-success.btn-simple:focus,
[data-theme="light"] .btn-success.btn-simple:active {
    color: #fff !important;
}


.btn-success.btn-link {
  color: var(--accent-primary) !important;
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

.btn-success.btn-link:hover,
.btn-success.btn-link:focus,
.btn-success.btn-link:active {
  color: var(--accent-primary-hover) !important;
}


/* --- Botón de Información (Mapeado a --accent-secondary) --- */
.btn-info {
  color: #ffffff;
  background-color: var(--accent-secondary);
  border-color: var(--accent-secondary);
  box-shadow: 0 0 15px rgba(94, 114, 228, 0.5);
}

.btn-info:hover,
.btn-info:focus,
.btn-info:active,
.btn-info.active,
.btn-info:active:focus,
.btn-info:active:hover,
.btn-info.active:focus,
.btn-info.active:hover {
  color: #ffffff !important;
  background-color: #7b8de9 !important; /* Versión más clara para hover */
  border-color: #7b8de9 !important;
  box-shadow: 0 0 20px rgba(94, 114, 228, 0.7) !important;
}

.btn-info:active {
  transform: translateY(0) !important;
  box-shadow: none !important;
}

.btn-info.disabled,
.btn-info:disabled,
.btn-info[disabled] {
  background-color: var(--accent-secondary);
  border-color: var(--accent-secondary);
  opacity: 0.5;
}

.btn-info.btn-simple {
  color: var(--accent-secondary) !important;
  border-color: var(--accent-secondary) !important;
  background: transparent !important;
  box-shadow: none !important;
}

.btn-info.btn-simple:hover,
.btn-info.btn-simple:focus,
.btn-info.btn-simple:active,
.btn-info.btn-simple.active {
  color: #ffffff !important;
  background-color: var(--accent-secondary) !important;
  box-shadow: 0 0 15px rgba(94, 114, 228, 0.5) !important;
}

.btn-info.btn-link {
  color: var(--accent-secondary) !important;
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

.btn-info.btn-link:hover,
.btn-info.btn-link:focus,
.btn-info.btn-link:active {
  color: #7b8de9 !important; /* Versión más clara para hover */
}


/* =================================================================================
   17. SOBREESCRITURAS DE BOTONES (FINAL)
   Mapeo de variantes de advertencia, peligro y neutral.
================================================================================= */

/* --- Botón de Advertencia (Mapeado a .btn-danger para consistencia) --- */
.btn-warning {
  color: #ffffff;
  background-color: var(--accent-brand);
  border-color: var(--accent-brand);
  box-shadow: 0 0 15px rgba(229, 57, 53, 0.5);
}

.btn-warning:hover,
.btn-warning:focus,
.btn-warning:active,
.btn-warning.active {
  color: #ffffff !important;
  background-color: #ff5252 !important; /* Rojo más brillante para hover */
  border-color: #ff5252 !important;
  box-shadow: 0 0 20px rgba(229, 57, 53, 0.7) !important;
}

.btn-warning:active {
  transform: translateY(0) !important;
  box-shadow: none !important;
}

.btn-warning.disabled,
.btn-warning:disabled,
.btn-warning[disabled] {
  background-color: var(--accent-brand);
  border-color: var(--accent-brand);
  opacity: 0.5;
}

.btn-warning.btn-simple {
  color: var(--accent-brand) !important;
  border-color: var(--accent-brand) !important;
  background: transparent !important;
  box-shadow: none !important;
}

.btn-warning.btn-simple:hover,
.btn-warning.btn-simple:focus,
.btn-warning.btn-simple:active,
.btn-warning.btn-simple.active {
  color: #ffffff !important;
  background-color: var(--accent-brand) !important;
  box-shadow: 0 0 15px rgba(229, 57, 53, 0.5) !important;
}

.btn-warning.btn-link {
  color: var(--accent-brand) !important;
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

.btn-warning.btn-link:hover,
.btn-warning.btn-link:focus,
.btn-warning.btn-link:active {
  color: #ff5252 !important; /* Rojo más brillante para hover */
}


/* --- Botón de Peligro / Marca (Refactorizado) --- */
.btn-danger {
  color: #ffffff;
  background-color: var(--accent-brand);
  border-color: var(--accent-brand);
  box-shadow: 0 0 15px rgba(229, 57, 53, 0.5);
}

.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active,
.btn-danger.active {
  color: #ffffff !important;
  background-color: #ff5252 !important;
  border-color: #ff5252 !important;
  box-shadow: 0 0 20px rgba(229, 57, 53, 0.7) !important;
}

.btn-danger:active {
  transform: translateY(0) !important;
  box-shadow: none !important;
}

.btn-danger.disabled,
.btn-danger:disabled,
.btn-danger[disabled] {
  background-color: var(--accent-brand);
  border-color: var(--accent-brand);
  opacity: 0.5;
}

.btn-danger.btn-simple {
  color: var(--accent-brand) !important;
  border-color: var(--accent-brand) !important;
  background: transparent !important;
  box-shadow: none !important;
}

.btn-danger.btn-simple:hover,
.btn-danger.btn-simple:focus,
.btn-danger.btn-simple:active,
.btn-danger.btn-simple.active {
  color: #ffffff !important;
  background-color: var(--accent-brand) !important;
  box-shadow: 0 0 15px rgba(229, 57, 53, 0.5) !important;
}

.btn-danger.btn-link {
  color: var(--accent-brand) !important;
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

.btn-danger.btn-link:hover,
.btn-danger.btn-link:focus,
.btn-danger.btn-link:active {
  color: #ff5252 !important;
}


/* --- Botón Neutral (Redefinido como botón secundario para tema claro) --- */
.btn-neutral {
  color: var(--text-primary);
  background-color: rgba(0, 0, 0, 0.05);
  border-color: var(--surface-border);
  box-shadow: none;
}
[data-theme="dark"] .btn-neutral {
    background-color: rgba(255, 255, 255, 0.05);
}


.btn-neutral:hover,
.btn-neutral:focus,
.btn-neutral:active,
.btn-neutral.active {
  color: var(--text-primary) !important;
  background-color: rgba(0, 0, 0, 0.1) !important;
  border-color: var(--surface-border) !important;
  box-shadow: 0 4px 20px 0 var(--shadow-color) !important;
  transform: translateY(-2px);
}
[data-theme="dark"] .btn-neutral:hover,
[data-theme="dark"] .btn-neutral:focus,
[data-theme="dark"] .btn-neutral:active {
    background-color: rgba(255, 255, 255, 0.1) !important;
}

.btn-neutral:active {
  transform: translateY(0) !important;
  box-shadow: none !important;
}

.btn-neutral.disabled,
.btn-neutral:disabled,
.btn-neutral[disabled] {
  opacity: 0.5;
}

/* Las variantes anidadas como .btn-neutral.btn-danger son una mala práctica y se eliminan. */

.btn-neutral.btn-link {
  color: var(--text-secondary) !important;
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

.btn-neutral.btn-link:hover,
.btn-neutral.btn-link:focus,
.btn-neutral.btn-link:active {
  color: var(--text-primary) !important;
}

/* --- Unificación Final --- */
.btn:disabled,
.btn[disabled],
.btn.disabled {
  opacity: 0.5;
  filter: alpha(opacity=50);
  pointer-events: none;
  transform: none;
  box-shadow: none;
}

.btn-simple { /* Reafirma que .btn-simple es un botón de contorno */
  border-width: 1px;
  box-shadow: none;
  background-color: transparent;
}
/* =================================================================================
   18. MODIFICADORES DE BOTÓN Y DROPDOWNS
   Finalizando estilos de botones y aplicando Glassmorphism a los menús desplegables.
================================================================================= */

/* --- Botón de Texto (Link) - Refinamiento Final --- */
.btn-link {
  border: 0;
  box-shadow: none;
  padding: 0.5rem 0.7rem;
  background: transparent;
  color: var(--accent-primary);
  font-weight: 500;
  text-decoration: none;
  transition: color 0.2s ease-in-out;
}

.btn-link:hover,
.btn-link:focus {
  box-shadow: none !important;
  transform: none !important;
  text-decoration: none;
  color: var(--accent-primary-hover);
}


/* --- Variantes de Tamaño de Botón --- */
.btn-lg,
.btn-group-lg > .btn {
  padding: 1rem 2rem;
  font-size: 1rem;
  border-radius: 1rem;
}

.btn-lg.btn-simple,
.btn-group-lg > .btn-simple.btn {
  padding: calc(1rem - 1px) calc(2rem - 1px); /* Ajuste para el borde */
}

.btn-sm,
.btn-group-sm > .btn {
  padding: 0.5rem 1rem;
  font-size: 0.75rem;
  border-radius: 0.5rem;
}

.btn-sm.btn-simple,
.btn-group-sm > .btn-simple.btn {
  padding: calc(0.5rem - 1px) calc(1rem - 1px); /* Ajuste para el borde */
}


/* --- Modificadores de Forma y Ancho --- */
.btn-wd {
  min-width: 140px;
}

.btn-round {
  border-radius: 9999px; /* Forma de píldora perfecta */
}

.btn-round.btn-simple {
  padding: calc(0.75rem - 1px) calc(1.5rem - 1px);
}


/* --- Grupos de Botones --- */
.btn-group.select {
  width: 100%;
}

.btn-group .btn.active {
  /* Efecto de "presionado" en lugar de sombra externa */
  background-color: rgba(0, 0, 0, 0.2);
  transform: translateY(0);
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.2);
  z-index: 2; /* Asegura que el botón activo esté por encima de sus hermanos */
}

[data-theme="light"] .btn-group .btn.active {
    background-color: rgba(0, 0, 0, 0.1);
    box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.1);
}

.btn-group.select .btn {
  text-align: left;
}

.btn-group.select .caret {
  position: absolute;
  top: 50%;
  margin-top: -2px;
  right: 12px;
}

.btn-group label.btn.active {
  transform: translateY(0); /* Anula la transformación de hover para el estado activo */
}


/* --- Miscelánea de Botones --- */
.no-caret.dropdown-toggle::after {
  display: none !important;
}

.btn-secondary:not(:disabled):not(.disabled):active,
.btn-secondary:not(:disabled):not(.disabled).active,
.show > .btn-secondary.dropdown-toggle {
  color: var(--text-primary);
  /* El estilo de fondo activo ya está definido en .btn:active */
}


/* --- Menú Desplegable (Dropdown Menu) --- */
.dropdown-menu {
  position: absolute;
  display: none; /* Se muestra con la clase .show */
  z-index: 1000;
  min-width: 12rem;
  padding: 0.5rem 0;
  margin: 0.125rem 0 0;
  font-size: 0.875rem;
  list-style: none;
  
  /* --- EFECTO GLASSMORPHISM --- */
  color: var(--text-secondary);
  background-color: var(--surface-color);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--surface-border);
  border-radius: 1rem;
  box-shadow: 0 8px 32px 0 var(--shadow-color);

  -webkit-transition: all 150ms linear;
  -moz-transition: all 150ms linear;
  -o-transition: all 150ms linear;
  -ms-transition: all 150ms linear;
  transition: all 150ms linear;
}

.dropdown-menu.dropdown-menu-right:before,
.dropdown-menu.dropdown-menu-right:after {
  left: auto;
  right: 10px;
}

.dropdown-menu.dropdown-black {
  background: linear-gradient(to bottom, #222a42 0%, #1d253b 100%);
  border: 1px solid #344675;
}

.dropdown-menu.dropdown-black .dropdown-item {
  color: rgba(255, 255, 255, 0.7);
}

.dropdown-menu.dropdown-black .dropdown-divider {
  border-color: #344675;
}

.dropdown-menu.dropdown-black:before {
  color: #222a42;
  z-index: 2;
}

.dropdown-menu.dropdown-black:after {
  display: inline-block;
  position: absolute;
  width: 0;
  height: 0;
  z-index: 1;
  vertical-align: middle;
  content: "";
  top: -6px;
  left: 10px;
  right: auto;
  color: #344675;
  border-bottom: .4em solid;
  border-right: .4em solid transparent;
  border-left: .4em solid transparent;
}

.dropdown-menu.dropdown-black.dropdown-menu-right:after {
  left: auto;
  right: 10px;
}

.dropup .dropdown-menu.dropdown-black:after {
  color: #1d253b;
  z-index: 2;
}

.dropup .dropdown-menu.dropdown-black:before {
  display: inline-block;
  position: absolute;
  width: 0;
  height: 0;
  vertical-align: middle;
  content: "";
  top: auto;
  bottom: -6px;
  right: auto;
  left: 10px;
  color: #555555;
  border-top: .4em solid;
  border-right: .4em solid transparent;
  border-left: .4em solid transparent;
  border-bottom: none;
  z-index: 1;
}

.dropdown-menu i {
  margin-right: 5px;
  position: relative;
  top: 1px;
}

.dropdown-menu .tim-icons {
  margin-right: 10px;
  position: relative;
  top: 4px;
  font-size: 18px;
  margin-top: -5px;
  opacity: .5;
}

.dropdown-menu .dropdown-item.active,
.dropdown-menu .dropdown-item:active {
  color: inherit;
}

.dropup .dropdown-menu:before {
  display: none;
}

.dropup .dropdown-menu:after {
  display: inline-block;
  position: absolute;
  width: 0;
  height: 0;
  vertical-align: middle;
  content: "";
  top: auto;
  bottom: -5px;
  right: auto;
  left: 10px;
  color: #ffffff;
  border-top: .4em solid;
  border-right: .4em solid transparent;
  border-left: .4em solid transparent;
  border-bottom: none;
}

.dropup .dropdown-menu.dropdown-menu-right:after,
.dropup .dropdown-menu.dropdown-menu-right:before {
  right: 10px;
  left: auto;
}

.dropdown-menu:before {
  display: inline-block;
  position: absolute;
  width: 0;
  height: 0;
  vertical-align: middle;
  content: "";
  top: -5px;
  left: 10px;
  right: auto;
  color: #ffffff;
  border-bottom: .4em solid;
  border-right: .4em solid transparent;
  border-left: .4em solid transparent;
}

.dropdown-menu.dropdown-menu-right {
  right: 0 !important;
  left: auto !important;
}

.dropdown-menu .dropdown-item,
.bootstrap-select .dropdown-menu.inner li a {
  font-size: 0.75rem;
  padding-top: .6rem;
  padding-bottom: .6rem;
  margin-top: 5px;
  -webkit-transition: all 150ms linear;
  -moz-transition: all 150ms linear;
  -o-transition: all 150ms linear;
  -ms-transition: all 150ms linear;
  transition: all 150ms linear;
}

.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus,
.bootstrap-select .dropdown-menu.inner li a:hover,
.bootstrap-select .dropdown-menu.inner li a:focus {
  background-color: rgba(222, 222, 222, 0.3);
}

.dropdown-menu .dropdown-item.disabled,
.dropdown-menu .dropdown-item:disabled,
.bootstrap-select .dropdown-menu.inner li a.disabled,
.bootstrap-select .dropdown-menu.inner li a:disabled {
  color: rgba(182, 182, 182, 0.6);
}

.dropdown-menu .dropdown-item.disabled:hover,
.dropdown-menu .dropdown-item.disabled:focus,
.dropdown-menu .dropdown-item:disabled:hover,
.dropdown-menu .dropdown-item:disabled:focus,
.bootstrap-select .dropdown-menu.inner li a.disabled:hover,
.bootstrap-select .dropdown-menu.inner li a.disabled:focus,
.bootstrap-select .dropdown-menu.inner li a:disabled:hover,
.bootstrap-select .dropdown-menu.inner li a:disabled:focus {
  background-color: transparent;
  box-shadow: none;
}

.dropdown-menu .dropdown-divider {
  background-color: rgba(222, 222, 222, 0.5);
}

.dropdown-menu .dropdown-header:not([href]):not([tabindex]) {
  color: rgba(182, 182, 182, 0.6);
  font-size: 0.62475rem;
  text-transform: uppercase;
  font-weight: 600;
}

.dropdown-menu.dropdown-primary {
  background-color: #df41c6;
}

.dropdown-menu.dropdown-primary:before {
  color: #df41c6;
}

.dropdown-menu.dropdown-primary .dropdown-header:not([href]):not([tabindex]) {
  color: rgba(255, 255, 255, 0.8);
}

.dropdown-menu.dropdown-primary .dropdown-item {
  color: #ffffff;
}

.dropdown-menu.dropdown-primary .dropdown-item:hover,
.dropdown-menu.dropdown-primary .dropdown-item:focus {
  background-color: rgba(255, 255, 255, 0.2);
}

.dropdown-menu.dropdown-primary .dropdown-divider {
  background-color: rgba(255, 255, 255, 0.2);
}

.dropdown-menu.dropdown-info {
  background-color: #0e84f8;
}

.dropdown-menu.dropdown-info:before {
  color: #0e84f8;
}

.dropdown-menu.dropdown-info .dropdown-header:not([href]):not([tabindex]) {
  color: rgba(255, 255, 255, 0.8);
}

.dropdown-menu.dropdown-info .dropdown-item {
  color: #ffffff;
}

.dropdown-menu.dropdown-info .dropdown-item:hover,
.dropdown-menu.dropdown-info .dropdown-item:focus {
  background-color: rgba(255, 255, 255, 0.2);
}

.dropdown-menu.dropdown-info .dropdown-divider {
  background-color: rgba(255, 255, 255, 0.2);
}

.dropdown-menu.dropdown-danger {
  background-color: #fd4e89;
}

.dropdown-menu.dropdown-danger:before {
  color: #fd4e89;
}

.dropdown-menu.dropdown-danger .dropdown-header:not([href]):not([tabindex]) {
  color: rgba(255, 255, 255, 0.8);
}

.dropdown-menu.dropdown-danger .dropdown-item {
  color: #ffffff;
}

.dropdown-menu.dropdown-danger .dropdown-item:hover,
.dropdown-menu.dropdown-danger .dropdown-item:focus {
  background-color: rgba(255, 255, 255, 0.2);
}

.dropdown-menu.dropdown-danger .dropdown-divider {
  background-color: rgba(255, 255, 255, 0.2);
}

.dropdown-menu.dropdown-success {
  background-color: #00e3b7;
}

.dropdown-menu.dropdown-success:before {
  color: #00e3b7;
}

.dropdown-menu.dropdown-success .dropdown-header:not([href]):not([tabindex]) {
  color: rgba(255, 255, 255, 0.8);
}

.dropdown-menu.dropdown-success .dropdown-item {
  color: #ffffff;
}

.dropdown-menu.dropdown-success .dropdown-item:hover,
.dropdown-menu.dropdown-success .dropdown-item:focus {
  background-color: rgba(255, 255, 255, 0.2);
}

.dropdown-menu.dropdown-success .dropdown-divider {
  background-color: rgba(255, 255, 255, 0.2);
}

.dropdown-menu.dropdown-warning {
  background-color: #ff8163;
}

.dropdown-menu.dropdown-warning:before {
  color: #ff8163;
}

.dropdown-menu.dropdown-warning .dropdown-header:not([href]):not([tabindex]) {
  color: rgba(255, 255, 255, 0.8);
}

.dropdown-menu.dropdown-warning .dropdown-item {
  color: #ffffff;
}

.dropdown-menu.dropdown-warning .dropdown-item:hover,
.dropdown-menu.dropdown-warning .dropdown-item:focus {
  background-color: rgba(255, 255, 255, 0.2);
}

.dropdown-menu.dropdown-warning .dropdown-divider {
  background-color: rgba(255, 255, 255, 0.2);
}

.dropdown .dropdown-menu,
.dropup:not(.bootstrap-select) .dropdown-menu,
.bootstrap-select .dropdown-menu:not(.inner),
.dropdown-menu.bootstrap-datetimepicker-widget.bottom {
  -webkit-transform: translate3d(0, -20px, 0) !important;
  -moz-transform: translate3d(0, -20px, 0) !important;
  -o-transform: translate3d(0, -20px, 0) !important;
  -ms-transform: translate3d(0, -20px, 0) !important;
  transform: translate3d(0, -20px, 0) !important;
  visibility: hidden;
  display: block;
  opacity: 0;
  filter: alpha(opacity=0);
  top: 100% !important;
}

.dropdown-menu.bootstrap-datetimepicker-widget.top {
  -webkit-transform: translate3d(0, -20px, 0) !important;
  -moz-transform: translate3d(0, -20px, 0) !important;
  -o-transform: translate3d(0, -20px, 0) !important;
  -ms-transform: translate3d(0, -20px, 0) !important;
  transform: translate3d(0, -20px, 0) !important;
  visibility: hidden;
  display: block;
  opacity: 0;
  filter: alpha(opacity=0);
}

.dropdown-menu.bootstrap-datetimepicker-widget.top,
.dropdown-menu.bootstrap-datetimepicker-widget.bottom {
  -webkit-transform: translate3d(0, -20px, 0) !important;
  -moz-transform: translate3d(0, -20px, 0) !important;
  -o-transform: translate3d(0, -20px, 0) !important;
  -ms-transform: translate3d(0, -20px, 0) !important;
  transform: translate3d(0, -20px, 0) !important;
}

.bootstrap-select.dropup .dropdown-menu:not(.inner) {
  -webkit-transform: translate3d(0, 25px, 0) !important;
  -moz-transform: translate3d(0, 25px, 0) !important;
  -o-transform: translate3d(0, 25px, 0) !important;
  -ms-transform: translate3d(0, 25px, 0) !important;
  transform: translate3d(0, 25px, 0) !important;
}

.dropup:not(.bootstrap-select) .dropdown-menu {
  -webkit-transform: translate3d(0, 20px, 0) !important;
  -moz-transform: translate3d(0, 20px, 0) !important;
  -o-transform: translate3d(0, 20px, 0) !important;
  -ms-transform: translate3d(0, 20px, 0) !important;
  transform: translate3d(0, 20px, 0) !important;
  top: auto !important;
  bottom: 100%;
}

.dropdown.show .dropdown-menu,
.bootstrap-select.show .dropdown-menu:not(.inner),
.dropdown-menu.bootstrap-datetimepicker-widget.top.open,
.dropdown-menu.bootstrap-datetimepicker-widget.bottom.open,
.dropup.show:not(.bootstrap-select) .dropdown-menu,
.navbar .dropdown.show .dropdown-menu {
  opacity: 1;
  filter: alpha(opacity=100);
  visibility: visible;
  -webkit-transform: translate3d(0, 1px, 0) !important;
  -moz-transform: translate3d(0, 1px, 0) !important;
  -o-transform: translate3d(0, 1px, 0) !important;
  -ms-transform: translate3d(0, 1px, 0) !important;
  transform: translate3d(0, 1px, 0) !important;
}

.dropdown-menu.bootstrap-datetimepicker-widget.top.open,
.dropdown-menu.bootstrap-datetimepicker-widget.bottom.open {
  -webkit-transform: translate3d(0, 0px, 0) !important;
  -moz-transform: translate3d(0, 0px, 0) !important;
  -o-transform: translate3d(0, 0px, 0) !important;
  -ms-transform: translate3d(0, 0px, 0) !important;
  transform: translate3d(0, 0px, 0) !important;
}

.dropup.show:not(.bootstrap-select) .dropdown-menu {
  -webkit-transform: translate3d(0, -2px, 0) !important;
  -moz-transform: translate3d(0, -2px, 0) !important;
  -o-transform: translate3d(0, -2px, 0) !important;
  -ms-transform: translate3d(0, -2px, 0) !important;
  transform: translate3d(0, -2px, 0) !important;
}

.dropdown-menu.dropdown-navbar {
  left: -80px;
}

.dropdown-menu.dropdown-navbar:before,
.dropdown-menu.dropdown-navbar:after {
  left: auto;
  right: 17px;
}

.btn {
  cursor: pointer;
}

.btn.dropdown-toggle[data-toggle="dropdown"] {
  padding: 10px;
  margin: 0;
  margin-bottom: 5px;
}

.btn.dropdown-toggle[data-toggle="dropdown"]:after {
  content: "";
  margin-left: 5px;
}

.btn span.bs-caret {
  display: none;
}

.btn.btn-link.dropdown-toggle {
  height: 22px;
  padding: 0;
  margin-right: 5px;
}

.dropdown-toggle:after {
  content: unset;
}

.btn:not(:disabled):not(.disabled).active:focus,
.btn:not(:disabled):not(.disabled):active:focus,
.show>.btn.dropdown-toggle:focus {
  box-shadow: none;
}

.dropdown-menu-sm {
  min-width: 100px;
  border: 0.4285rem;
}

.dropdown-menu-lg {
  min-width: 260px;
  border-radius: 0.4285rem;
}

.dropdown-menu-xl {
  min-width: 450px;
  border-radius: 0.4285rem;
}

@media screen and (max-width: 991px) {
  .dropdown-toggle:after {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: .255em;
    vertical-align: .255em;
    content: "";
    border-top: .3em solid;
    border-right: .3em solid transparent;
    border-bottom: 0;
    border-left: .3em solid transparent;
  }
}

@media screen and (min-width: 992px) {
  .dropdown-menu .dropdown-item {
    color: #9A9A9A;
  }
}

/* =================================================================================
   19. COMPONENT: FOOTER
   Refactorizado con Flexbox, variables de tema y diseño integrado.
================================================================================= */

.footer {
  padding: 1.5rem 1.875rem 1.5rem 1.875rem; /* Padding base (30px) */
  background: transparent;
  border-top: 1px solid var(--surface-border);
  
  /* Layout Modernizado con Flexbox */
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap; /* Permite que los elementos se apilen en pantallas pequeñas */
}

/* 
   NOTA: El padding-left se ajustará dinámicamente con JavaScript o clases 
   cuando se implemente la lógica del sidebar. Por ahora, el padding es simétrico.
*/

.footer [class*="container-"] {
  padding: 0;
}

.footer .nav {
  display: flex; /* Los nav-items se alinearán en fila */
  flex-wrap: wrap;
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
}

.footer .nav-item {
  display: inline-block;
}

.footer .nav-item:first-child .nav-link {
  padding-left: 0;
}

.footer .nav-link {
  color: var(--text-secondary); /* Usa el color de texto secundario del tema */
  padding: 0 0.75rem;
  font-size: 0.75rem;
  font-weight: 400;
  text-transform: uppercase;
  text-decoration: none;
  transition: color 0.2s ease-in-out;
}

.footer .nav-link:hover {
  text-decoration: none;
  color: var(--text-primary); /* Resaltado sutil al pasar el cursor */
}

.footer .copyright {
  font-size: 0.75rem;
  line-height: 1.8;
  color: var(--text-secondary); /* Usa el color de texto secundario del tema */
  text-align: right;
}

/* El clearfix :after ya no es necesario con Flexbox */

/* --- Media Queries para Responsividad del Footer --- */

@media screen and (max-width: 991px) {
  .footer {
    padding-left: 1.875rem; /* Mantiene el padding simétrico en tablet */
  }
}

@media screen and (max-width: 768px) {
  .footer {
    flex-direction: column; /* Apila los elementos verticalmente */
    justify-content: center; /* Centra el contenido */
  }
  
  .footer .nav {
    margin-bottom: 0.75rem; /* Espacio entre la navegación y el copyright */
    justify-content: center;
  }

  .footer .copyright {
    text-align: center; /* Centra el texto de copyright */
  }
}

@media screen and (max-width: 576px) {
  .footer {
    padding: 1.5rem 1rem; /* Menos padding en móviles */
  }

  .footer .nav-link {
    padding: 0 0.5rem; /* Menos padding entre enlaces */
  }
}


/* =================================================================================
   20. SOBREESCRITURAS DE FORMULARIOS Y UTILIDADES DE IMAGEN
   Unificando estilos de placeholder, grupos de input, validación e imágenes.
================================================================================= */

/* --- Estilos de Placeholder --- */
/* Unificamos todos los prefijos para usar la variable del tema */
.form-control::placeholder {
  color: var(--text-secondary);
  opacity: 0.8;
}

.form-control::-webkit-input-placeholder { /* Edge, Chrome, Safari */
  color: var(--text-secondary);
  opacity: 0.8;
}

.form-control:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: var(--text-secondary);
  opacity: 0.8;
}

.form-control::-ms-input-placeholder { /* Microsoft Edge */
  color: var(--text-secondary);
  opacity: 0.8;
}


/* --- Sobreescrituras y Estilos Específicos de .form-control --- */
.form-control {
  /* Estas propiedades ya están definidas en la base, se omiten para evitar redundancia,
     pero nos aseguramos de que la transición sea consistente */
  transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, background-color 0.2s ease-in-out;
}

.form-control:focus {
  /* Ya definido en la base de formularios, esto asegura que el comportamiento sea el correcto */
  border-color: var(--accent-primary);
  background-color: rgba(0, 0, 0, 0.2);
  box-shadow: var(--accent-glow);
}
[data-theme="light"] .form-control:focus {
    background-color: rgba(255, 255, 255, 0.8);
}

.form-control:focus + .input-group-append .input-group-text,
.form-control:focus ~ .input-group-append .input-group-text,
.form-control:focus + .input-group-prepend .input-group-text,
.form-control:focus ~ .input-group-prepend .input-group-text {
  border-color: var(--accent-primary);
  background-color: transparent;
}


/* --- Estados de Validación (has-success, has-danger) --- */

.has-success .form-control,
.has-success.input-group-focus .input-group-prepend .input-group-text,
.has-success.input-group-focus .input-group-append .input-group-text {
  border-color: var(--accent-primary) !important; /* Usamos `!important` para sobreescribir si es necesario */
}

.has-danger .form-control,
.has-danger .input-group-prepend .input-group-text,
.has-danger.input-group-focus .input-group-prepend .input-group-text,
.has-danger.input-group-focus .input-group-append .input-group-text {
  border-color: var(--accent-brand) !important;
  color: var(--accent-brand);
}

.has-danger .form-control:focus {
    box-shadow: 0 0 15px rgba(229, 57, 53, 0.5);
}

/* Iconos de feedback de validación */
.has-success:after,
.has-danger:after {
  font-family: 'nucleo'; /* Asegúrate de tener esta fuente si usas los iconos */
  content: "\ea1b"; /* Icono de check */
  display: inline-block;
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--accent-primary);
  font-size: 1rem;
  pointer-events: none;
}

.has-danger:after {
  content: "\ea48"; /* Icono de error */
  color: var(--accent-brand);
}

.has-success.has-label:after,
.has-danger.has-label:after {
  top: calc(50% + 0.75rem); /* Ajuste si hay una label arriba */
}

.has-success.form-check:after,
.has-danger.form-check:after {
  display: none !important; /* No mostrar icono en checkboxes */
}

.has-success.form-check .form-check-label {
  color: var(--accent-primary);
}

.has-danger.form-check .form-check-label {
  color: var(--accent-brand);
}


/* --- Estilos para Input Groups --- */
.input-group-prepend .input-group-text,
.input-group-append .input-group-text {
  background-color: transparent;
  border: 1px solid var(--surface-border);
  color: var(--text-secondary);
}

.input-group-prepend .input-group-text {
    border-right: none;
}
.input-group-append .input-group-text {
    border-left: none;
}


/* --- Utilidades de Imagen --- */
img {
  max-width: 100%;
  border-radius: 0.75rem; /* Aumentamos el radio para consistencia */
}

.img-raised {
  box-shadow: 0 10px 25px 0 var(--shadow-color);
}


/* =================================================================================
   21. SOBREESCRITURAS Y VARIANTES DE MODALES
   Unificando variantes de color y estilos especiales como modal-search.
================================================================================= */

/* --- Estilos Generales de Contenido de Modal (Refuerzo) --- */
.modal-content {
  border: 1px solid var(--surface-border); /* Refuerzo del estilo base */
}

.modal-content .modal-header {
  border-bottom: 1px solid var(--surface-border); /* Usar variable en lugar de none */
}

.modal-content .modal-header .modal-title,
.modal-content .modal-header .title {
  color: var(--text-primary);
  margin-top: 0;
}

.modal-content .modal-header i.tim-icons {
  font-size: 1rem;
  margin-right: 0.5rem;
}

.modal-content .modal-body {
  line-height: 1.8;
}

.modal-content .modal-body p {
  color: var(--text-secondary);
}

.modal-content .modal-footer {
  border-top: 1px solid var(--surface-border); /* Usar variable en lugar de 0 */
  justify-content: flex-end; /* Estándar moderno, sobreescribe space-between */
}

.modal-content .modal-footer button {
  margin: 0 0.25rem;
}

.modal-content .modal-body + .modal-footer {
  padding-top: 1.25rem;
}


/* --- Variantes de Color de Modal (Estilo de Brillo) --- */
/*
   NOTA: En lugar de cambiar todo el fondo, ahora "teñimos" el modal con un
   borde y un brillo de color, manteniendo la estética de vidrio.
*/

.modal.modal-primary .modal-content {
  border-color: var(--accent-primary);
  box-shadow: 0 8px 32px 0 var(--shadow-color), 0 0 25px var(--accent-primary);
}
/* Mapeamos success a primary */
.modal.modal-success .modal-content {
  border-color: var(--accent-primary);
  box-shadow: 0 8px 32px 0 var(--shadow-color), 0 0 25px var(--accent-primary);
}

.modal.modal-danger .modal-content {
  border-color: var(--accent-brand);
  box-shadow: 0 8px 32px 0 var(--shadow-color), 0 0 25px var(--accent-brand);
}
/* Mapeamos warning a danger */
.modal.modal-warning .modal-content {
  border-color: var(--accent-brand);
  box-shadow: 0 8px 32px 0 var(--shadow-color), 0 0 25px var(--accent-brand);
}

.modal.modal-info .modal-content {
  border-color: var(--accent-secondary);
  box-shadow: 0 8px 32px 0 var(--shadow-color), 0 0 25px var(--accent-secondary);
}

/* 
   Se elimina la complejidad de los formularios internos por cada variante de color.
   Los formularios dentro de los modales ahora heredan los estilos globales,
   lo cual es más robusto y mantenible.
*/


/* --- Variante de Modal Oscuro (modal-black) --- */
.modal.modal-black .modal-content {
  background: linear-gradient(to bottom, hsl(230, 20%, 15%), hsl(240, 30%, 5%));
  border-color: var(--surface-border);
  color: var(--text-primary);
}

.modal.modal-black .modal-content .modal-header .modal-title,
.modal.modal-black .modal-content .modal-header .title,
.modal.modal-black .modal-content .modal-body p,
.modal.modal-black h1, .modal.modal-black h2, .modal.modal-black h3,
.modal.modal-black h4, .modal.modal-black h5, .modal.modal-black h6 {
  color: var(--text-primary);
}


/* --- Variante de Modal de Búsqueda --- */
.modal-search {
    padding-top: 5vh;
}

.modal-search .modal-dialog {
  margin: 20px auto;
  max-width: 650px;
}

.modal-search .modal-content {
    background-color: transparent;
    border: none;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.modal-search .modal-content .modal-header {
  padding: 1.5rem;
  border-bottom: 2px solid var(--surface-border);
}

.modal-search .modal-header .form-control {
  border: none !important;
  background-color: transparent !important;
  box-shadow: none !important;
  font-size: 1.5rem;
  font-weight: 300;
  padding: 0;
  height: auto;
  color: var(--text-primary);
}
.modal-search .modal-header .form-control::placeholder {
    color: var(--text-secondary);
}

.modal-search .modal-header .close {
  color: var(--text-secondary);
  top: 50% !important;
  right: 1.5rem;
  transform: translateY(-50%);
  margin: 0;
  padding: 0;
}

.modal-search .modal-footer {
    display: none; /* Generalmente no se usa en modales de búsqueda */
}

.navbar {
  padding: 10px 30px 10px 15px;
  width: 100%;
  z-index: 1050;
}

.navbar .photo {
  display: inline-block;
  height: 30px;
  width: 30px;
  border-radius: 50%;
  vertical-align: middle;
  overflow: hidden;
}

.navbar .photo img {
  width: 100%;
}

.navbar .navbar-wrapper {
    display: flex;
    align-items: center; 
    justify-content: flex-start;
    flex-wrap: nowrap; 
    gap: 15px; 
    width: auto; 
}

.navbar .btn {
  margin: 0 5px 0 10px;
}

.navbar.navbar-absolute {
  position: absolute;
  z-index: 1050;
}


.navbar.bg-white .navbar-nav .search-bar.input-group .form-control {
  border-radius: 4px;
}




.navbar .navbar-brand {
    position: relative !important; 
    margin: 0 !important;
    padding: 0 !important;
    display: flex;
    align-items: center;
    height: 100%;
    z-index: 1;
}
.navbar .dropdown.nav-item, 
.navbar .navbar-wrapper .dropdown {
    margin: 0 !important;
    position: relative;
    border-left: 1px solid rgba(255, 255, 255, 0.15) !important; /* Separador más visible */
    padding-left: 20px !important; /* Espacio después del separador */
    height: 32px; /* Altura fija para alinear el borde vertical */
    display: flex;
    align-items: center;
}
.navbar .navbar-toggle button:focus,
.navbar .navbar-toggler {
  outline: none;
}

.navbar-minimize-fixed {
  position: fixed;
  margin-left: 40px;
  margin-top: 14px;
  transition: 0.3s ease;
  color: white;
  z-index: 20;
  opacity: 0;
  transition: 0.2s ease;
}

.navbar-minimize-fixed button i {
  font-size: 20px;
}

.notification {
  background: #fd5d93;
  color: #ffffff;
  border-radius: 0.875rem;
  height: 6px;
  width: 6px;
  position: absolute;
  text-align: center;
  font-size: 12px;
  font-weight: 800;
  top: 10px;
  right: 10px;
  border: 1px solid #fd5d93;
}

.navbar-nav li {
  padding: 0 10px;
}

.navbar-nav li i {
  vertical-align: middle;
  font-size: 20px;
}

@media screen and (max-width: 991px) {
  .navbar .container-fluid {
    padding-right: 15px;
    padding-left: 15px;
  }

  .navbar .navbar-collapse .input-group {
    margin: 0;
    margin-top: 5px;
  }

  .navbar .navbar-nav .btn {
    margin-left: -3px;
    display: flex;
  }

  .navbar .navbar-nav .btn i {
    margin-right: 12px;
  }

  .navbar .navbar-nav .btn span {
    margin: 0;
    text-transform: uppercase;
    font-weight: 300;
  }

  .navbar .navbar-nav .btn span,
  .navbar .navbar-nav .btn span:hover,
  .navbar .navbar-nav .btn span:focus,
  .navbar .navbar-nav .btn span:active,
  .navbar .navbar-nav .btn span:active:focus {
    color: #222a42 !important;
  }

  .navbar .navbar-nav a.nav-link i {
    opacity: 1;
    margin-left: 4px;
    margin-right: 5px;
  }

  .navbar .navbar-nav a.nav-link p {
    display: inline-block;
    text-transform: uppercase;
    margin-left: 7px;
  }

  .navbar .navbar-nav .modal-search .modal-dialog {
    padding: 0 40px;
  }

  .navbar .navbar-nav .dropdown {
    margin: 5px 0;
  }

  .navbar .navbar-nav .dropdown .nav-link {
    padding-bottom: 0;
  }

  .navbar .navbar-nav .dropdown .dropdown-menu .dropdown-item {
    margin-top: 0;
    padding-left: 24px;
  }

  .navbar .dropdown.show .dropdown-menu {
    display: block;
  }

  .navbar .dropdown .dropdown-menu {
    display: none;
  }

  .navbar .dropdown .dropdown-menu li a {
    color: #222a42;
  }

  .navbar .dropdown.show .dropdown-menu,
  .navbar .dropdown .dropdown-menu {
    background-color: transparent;
    border: 0;
    transition: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    width: auto;
    margin: 0px 1rem;
    margin-top: 0px;
  }

  .navbar .dropdown.show .dropdown-menu:before,
  .navbar .dropdown .dropdown-menu:before {
    display: none;
  }

  .navbar .dropdown-menu .dropdown-item:focus,
  .navbar .dropdown-menu .dropdown-item:hover {
    color: #ffffff;
  }

  .navbar.bg-white .dropdown-menu .dropdown-item:focus,
  .navbar.bg-white .dropdown-menu .dropdown-item:hover {
    color: #344675;
  }

  .navbar button.navbar-toggler[data-target="#navigation"] {
    padding-top: 0;
  }

  .navbar .navbar-toggler-bar {
    display: block;
    position: relative;
    width: 22px;
    height: 1px;
    border-radius: 1px;
    background: var(--text-primary);
  }

  .navbar .navbar-toggler-bar.navbar-kebab {
    height: 4px;
    width: 4px;
    margin-bottom: 3px;
    border-radius: 50%;
  }

  .navbar .navbar-toggler-bar+.navbar-toggler-bar {
    margin-top: 7px;
  }

  .navbar .navbar-toggler-bar+.navbar-toggler-bar.navbar-kebab {
    margin-top: 0px;
  }

  .navbar .navbar-toggler-bar.bar2 {
    width: 17px;
    transition: width .2s linear;
  }

  .navbar.bg-white:not(.navbar-transparent) .navbar-toggler-bar {
    background-color: #344675;
  }

  .navbar .toggled .navbar-toggler-bar {
    width: 24px;
  }

  .navbar .toggled .navbar-toggler-bar+.navbar-toggler-bar {
    margin-top: 5px;
  }

  .navbar .navbar-brand {
    margin-left: 20px;
    position: relative;
  }

  .navbar-nav .nav-link i.fa,
  .navbar-nav .nav-link i.tim-icons {
    opacity: .5;
  }

  .bar1,
  .bar2,
  .bar3 {
    outline: 1px solid transparent;
  }

  .bar1 {
    top: 0px;
    -webkit-animation: topbar-back 500ms linear 0s;
    -moz-animation: topbar-back 500ms linear 0s;
    animation: topbar-back 500ms 0s;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
  }

  .bar2 {
    opacity: 1;
  }

  .bar3 {
    bottom: 0px;
    -webkit-animation: bottombar-back 500ms linear 0s;
    -moz-animation: bottombar-back 500ms linear 0s;
    animation: bottombar-back 500ms 0s;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
  }

  .toggled .bar1 {
    top: 6px;
    -webkit-animation: topbar-x 500ms linear 0s;
    -moz-animation: topbar-x 500ms linear 0s;
    animation: topbar-x 500ms 0s;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
  }

  .toggled .bar2 {
    opacity: 0;
  }

  .toggled .bar3 {
    bottom: 6px;
    -webkit-animation: bottombar-x 500ms linear 0s;
    -moz-animation: bottombar-x 500ms linear 0s;
    animation: bottombar-x 500ms 0s;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
  }

  @keyframes topbar-x {
    0% {
      top: 0px;
      transform: rotate(0deg);
    }

    45% {
      top: 6px;
      transform: rotate(145deg);
    }

    75% {
      transform: rotate(130deg);
    }

    100% {
      transform: rotate(135deg);
    }
  }

  @-webkit-keyframes topbar-x {
    0% {
      top: 0px;
      -webkit-transform: rotate(0deg);
    }

    45% {
      top: 6px;
      -webkit-transform: rotate(145deg);
    }

    75% {
      -webkit-transform: rotate(130deg);
    }

    100% {
      -webkit-transform: rotate(135deg);
    }
  }

  @-moz-keyframes topbar-x {
    0% {
      top: 0px;
      -moz-transform: rotate(0deg);
    }

    45% {
      top: 6px;
      -moz-transform: rotate(145deg);
    }

    75% {
      -moz-transform: rotate(130deg);
    }

    100% {
      -moz-transform: rotate(135deg);
    }
  }

  @keyframes topbar-back {
    0% {
      top: 6px;
      transform: rotate(135deg);
    }

    45% {
      transform: rotate(-10deg);
    }

    75% {
      transform: rotate(5deg);
    }

    100% {
      top: 0px;
      transform: rotate(0);
    }
  }

  @-webkit-keyframes topbar-back {
    0% {
      top: 6px;
      -webkit-transform: rotate(135deg);
    }

    45% {
      -webkit-transform: rotate(-10deg);
    }

    75% {
      -webkit-transform: rotate(5deg);
    }

    100% {
      top: 0px;
      -webkit-transform: rotate(0);
    }
  }

  @-moz-keyframes topbar-back {
    0% {
      top: 6px;
      -moz-transform: rotate(135deg);
    }

    45% {
      -moz-transform: rotate(-10deg);
    }

    75% {
      -moz-transform: rotate(5deg);
    }

    100% {
      top: 0px;
      -moz-transform: rotate(0);
    }
  }

  @keyframes bottombar-x {
    0% {
      bottom: 0px;
      transform: rotate(0deg);
    }

    45% {
      bottom: 6px;
      transform: rotate(-145deg);
    }

    75% {
      transform: rotate(-130deg);
    }

    100% {
      transform: rotate(-135deg);
    }
  }

  @-webkit-keyframes bottombar-x {
    0% {
      bottom: 0px;
      -webkit-transform: rotate(0deg);
    }

    45% {
      bottom: 6px;
      -webkit-transform: rotate(-145deg);
    }

    75% {
      -webkit-transform: rotate(-130deg);
    }

    100% {
      -webkit-transform: rotate(-135deg);
    }
  }

  @-moz-keyframes bottombar-x {
    0% {
      bottom: 0px;
      -moz-transform: rotate(0deg);
    }

    45% {
      bottom: 6px;
      -moz-transform: rotate(-145deg);
    }

    75% {
      -moz-transform: rotate(-130deg);
    }

    100% {
      -moz-transform: rotate(-135deg);
    }
  }

  @keyframes bottombar-back {
    0% {
      bottom: 6px;
      transform: rotate(-135deg);
    }

    45% {
      transform: rotate(10deg);
    }

    75% {
      transform: rotate(-5deg);
    }

    100% {
      bottom: 0px;
      transform: rotate(0);
    }
  }

  @-webkit-keyframes bottombar-back {
    0% {
      bottom: 6px;
      -webkit-transform: rotate(-135deg);
    }

    45% {
      -webkit-transform: rotate(10deg);
    }

    75% {
      -webkit-transform: rotate(-5deg);
    }

    100% {
      bottom: 0px;
      -webkit-transform: rotate(0);
    }
  }

  @-moz-keyframes bottombar-back {
    0% {
      bottom: 6px;
      -moz-transform: rotate(-135deg);
    }

    45% {
      -moz-transform: rotate(10deg);
    }

    75% {
      -moz-transform: rotate(-5deg);
    }

    100% {
      bottom: 0px;
      -moz-transform: rotate(0);
    }
  }

  @-webkit-keyframes fadeIn {
    0% {
      opacity: 0;
    }

    100% {
      opacity: 1;
    }
  }

  @-moz-keyframes fadeIn {
    0% {
      opacity: 0;
    }

    100% {
      opacity: 1;
    }
  }

  @keyframes fadeIn {
    0% {
      opacity: 0;
    }

    100% {
      opacity: 1;
    }
  }
}

@media screen and (min-width: 992px) {
  .navbar-collapse {
    background: none !important;
  }

  .navbar .navbar-toggle {
    display: none;
  }

  .navbar-nav .nav-link.profile-photo {
    padding: 0;
    margin: 7px 0.7rem;
  }

  .navbar .caret {
    position: absolute;
    left: 80%;
    top: 55%;
    margin-left: 0;
  }

  .navbar-expand-lg .navbar-nav .nav-link {
    padding-right: 0.5rem;
    padding-left: 0.5rem;
  }
}

@media screen and (max-width: 576px) {
  .navbar[class*='navbar-toggleable-'] .container {
    margin-left: 0;
    margin-right: 0;
  }
}


/* =================================================================================
   22. SOBREESCRITURAS DE TIPOGRAFÍA, TABLAS Y FORM-CHECKS
   Unificando estilos de listas, tablas especiales y controles de formulario.
================================================================================= */

/* --- Estilos de Texto y Elementos Genéricos --- */
ul li,
ol li {
  color: var(--text-secondary); /* Usa el color de texto secundario para listas */
}

pre {
  color: var(--text-secondary);
  background-color: var(--surface-color);
  border: 1px solid var(--surface-border);
  padding: 1rem;
  border-radius: 0.5rem;
}

hr {
  border-top: 1px solid var(--surface-border); /* Unificación con el estilo base */
  margin-top: 1rem;
  margin-bottom: 1rem;
}


/* --- Sobreescrituras y Estilos Específicos de Tablas --- */
.table > tbody > tr > td {
  color: var(--text-secondary) !important; /* Asegura la consistencia del color */
}

.table > tbody > tr > td .photo,
.table .img-wrapper {
  height: 40px;
  width: 40px;
  border-radius: 50%;
  overflow: hidden;
  margin: 0 auto;
}
.table > tbody > tr > td .photo img {
  width: 100%;
}

/* NOTA: Se eliminan las clases .table-success, .table-info, etc. que añaden fondos sólidos */

.table .img-row {
  max-width: 60px;
  width: 60px;
}

.table .form-check {
  margin: 0;
  padding-left: 0; /* Ajuste para centrar en la celda */
  display: flex;
  justify-content: center;
}

.table .btn {
  margin: 0;
}

.table small,
.table .small {
  font-weight: 300;
  color: var(--text-secondary);
}

.card-tasks .card-body .table {
  margin-bottom: 0;
}
.card-tasks .card-body .table td,
.card-tasks .card-body .table th {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

/* Estilos de tabla especiales */
.table.table-shopping tbody tr:last-child td {
  border-bottom: none;
}

.table .th-description { max-width: 150px; }

.table .td-price {
  font-size: 1.5rem;
  font-weight: 300;
  text-align: right;
  color: var(--text-primary);
}

.table .td-total {
  font-weight: 600;
  font-size: 1rem;
  padding-top: 1.25rem;
  text-align: right;
  color: var(--text-primary);
}

.table .td-actions .btn {
  margin: 0;
}

.table > tfoot > tr {
  color: var(--text-secondary);
  text-transform: uppercase;
  font-size: 0.75rem;
}


/* --- Estilos para Plugins de Tablas (DataTables, tablesorter) --- */
table.tablesorter thead tr .header {
  cursor: pointer;
  /* Íconos de ordenación se pueden añadir con ::after y CSS moderno si se desea */
}

.dataTables_wrapper .table-striped tbody tr:nth-of-type(odd) {
  background-color: rgba(255, 255, 255, 0.02); /* Rayado muy sutil para tema oscuro */
}
[data-theme="light"] .dataTables_wrapper .table-striped tbody tr:nth-of-type(odd) {
  background-color: rgba(0, 0, 0, 0.02);
}

.dataTables_wrapper .form-control-sm {
  font-size: 0.75rem; /* Ajuste de tamaño para los inputs de DataTables */
}


/* --- Refactorización de .form-check (Checkboxes y Radios) --- */
.form-check {
  margin-top: .5rem;
  padding-left: 1.75rem; /* Espacio para el control personalizado */
}

.form-check .form-check-label {
  display: inline-block;
  position: relative;
  cursor: pointer;
  padding-left: 0; /* El padding ya está en .form-check */
  line-height: 1.25rem;
  margin-bottom: 0;
  color: var(--text-secondary);
  transition: color 0.2s linear;
}

.form-check input[type="checkbox"],
.form-check input[type="radio"] {
  opacity: 0;
  position: absolute;
  visibility: hidden;
}

.form-check .form-check-sign::before {
  content: " ";
  display: inline-block;
  position: absolute;
  width: 1.25rem; /* 20px */
  height: 1.25rem;
  left: -1.75rem;
  top: 0;
  cursor: pointer;
  border: 1px solid var(--surface-border);
  background-color: rgba(0, 0, 0, 0.1);
  transition: all 0.2s linear;
}
[data-theme="light"] .form-check .form-check-sign::before {
    background-color: rgba(255, 255, 255, 0.5);
}


.form-check .form-check-sign::after {
  font-family: 'nucleo'; /* O tu fuente de iconos */
  content: "\ea1b"; /* Checkmark */
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  width: 1.25rem;
  height: 1.25rem;
  left: -1.75rem;
  top: 0;
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  opacity: 0;
  transform: scale(0.5);
  transition: all 0.2s linear;
}

/* Checkbox Styles */
.form-check .form-check-sign::before {
  border-radius: 0.25rem;
}
.form-check input[type="checkbox"]:checked + .form-check-sign::before {
  background-color: var(--accent-primary);
  border-color: var(--accent-primary);
}
.form-check input[type="checkbox"]:checked + .form-check-sign::after {
  opacity: 1;
  transform: scale(1);
}

/* Radio Styles */
.form-check-radio .form-check-sign::before {
  border-radius: 50%;
}
.form-check-radio .form-check-sign::after {
  content: ""; /* No es un icono, es un punto */
  width: 0.5rem; /* 8px */
  height: 0.5rem;
  left: calc(-1.75rem + 0.375rem); /* Centrado */
  top: 0.375rem;
  border-radius: 50%;
  background-color: #fff;
}
.form-check-radio input[type="radio"]:checked + .form-check-sign::before {
  border-color: var(--accent-primary);
  background-color: var(--accent-primary);
}
.form-check-radio input[type="radio"]:checked + .form-check-sign::after {
  opacity: 1;
  transform: scale(1);
}

/* Disabled State */
.form-check.disabled .form-check-label,
.form-check input:disabled ~ .form-check-label {
  opacity: .5;
  cursor: not-allowed;
}
.form-check input:disabled ~ .form-check-sign::before {
    background-color: rgba(0,0,0,0.2);
}

.fixed-plugin {
  position: fixed;
  right: 0;
  width: 64px;
  background: rgba(0, 0, 0, 0.3);
  z-index: 1031;
  border-radius: 8px 0 0 8px;
  text-align: center;
  top: 130px;
}

.fixed-plugin li>a,
.fixed-plugin .badge {
  transition: all .34s;
  -webkit-transition: all .34s;
  -moz-transition: all .34s;
}

.fixed-plugin .fa-cog {
  color: #ffffff;
  padding: 10px;
  border-radius: 0 0 6px 6px;
  width: auto;
}

.fixed-plugin .dropdown-menu {
  right: 80px;
  left: auto !important;
  top: -52px !important;
  width: 290px;
  border-radius: 0.1875rem;
  padding: 0 10px;
  background: linear-gradient(#222a42, #1d253b);
}

.fixed-plugin .dropdown .dropdown-menu .tim-icons {
  top: 5px;
}

.fixed-plugin .dropdown-menu:after,
.fixed-plugin .dropdown-menu:before {
  right: 10px;
  margin-left: auto;
  left: auto;
}

.fixed-plugin .fa-circle-thin {
  color: #ffffff;
}

.fixed-plugin .active .fa-circle-thin {
  color: #00bbff;
}

.fixed-plugin .dropdown-menu>.active>a,
.fixed-plugin .dropdown-menu>.active>a:hover,
.fixed-plugin .dropdown-menu>.active>a:focus {
  color: #777777;
  text-align: center;
}

.fixed-plugin img {
  border-radius: 0;
  width: 100%;
  height: 100px;
  margin: 0 auto;
}

.fixed-plugin .dropdown-menu li>a:hover,
.fixed-plugin .dropdown-menu li>a:focus {
  box-shadow: none;
}

.fixed-plugin .badge {
  border: 2px solid #ffffff;
  border-radius: 50%;
  cursor: pointer;
  display: inline-block;
  height: 23px;
  margin-right: 5px;
  position: relative;
  width: 23px;
}

.fixed-plugin .badge.active,
.fixed-plugin .badge:hover {
  border-color: #1d253b;
}

.fixed-plugin .light-badge,
.fixed-plugin .dark-badge {
  margin: 0;
  border: 1px solid #1d8cf8;
}

.fixed-plugin .light-badge:hover,
.fixed-plugin .dark-badge:hover {
  border: 1px solid #1d8cf8;
}

.fixed-plugin .light-badge {
  background: #ffffff;
}

.fixed-plugin .light-badge:hover {
  background: #ffffff;
}

.fixed-plugin .dark-badge {
  background: #222a42;
}

.fixed-plugin .dark-badge:hover {
  background: #222a42;
}

.fixed-plugin h5 {
  margin: 10px;
}

.fixed-plugin .dropdown-menu li {
  display: block;
  padding: 18px 2px;
  width: 25%;
  float: left;
}

.fixed-plugin li.adjustments-line,
.fixed-plugin li.header-title,
.fixed-plugin li.button-container {
  width: 100%;
  height: 50px;
  min-height: inherit;
}

.fixed-plugin li.button-container {
  height: auto;
}

.fixed-plugin li.button-container div {
  margin-bottom: 5px;
}

.fixed-plugin #sharrreTitle {
  text-align: center;
  padding: 10px 0;
  height: 50px;
}

.fixed-plugin li.header-title {
  color: #ffffff;
  height: 30px;
  line-height: 25px;
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  text-transform: uppercase;
}

.fixed-plugin .adjustments-line a {
  color: transparent;
}

.fixed-plugin .adjustments-line a .badge-colors {
  position: relative;
  top: -2px;
}

.fixed-plugin .adjustments-line a a:hover,
.fixed-plugin .adjustments-line a a:focus {
  color: transparent;
}

.fixed-plugin .adjustments-line .togglebutton {
  text-align: center;
}

.fixed-plugin .adjustments-line .togglebutton .label-switch {
  position: relative;
  left: -10px;
  font-size: 0.62475rem;
  color: #ffffff;
}

.fixed-plugin .adjustments-line .togglebutton .label-switch.label-right {
  left: 10px;
}

.fixed-plugin .adjustments-line .togglebutton .toggle {
  margin-right: 0;
}

.fixed-plugin .adjustments-line .color-label {
  position: relative;
  top: -7px;
  font-size: 0.62475rem;
  color: #ffffff;
}

.fixed-plugin .adjustments-line .dropdown-menu>li.adjustments-line>a {
  padding-right: 0;
  padding-left: 0;
  border-bottom: 1px solid #ddd;
  border-radius: 0;
  margin: 0;
}

.fixed-plugin .dropdown-menu>li>a.img-holder {
  font-size: 1rem;
  text-align: center;
  border-radius: 10px;
  background-color: #ffffff;
  border: 3px solid #ffffff;
  padding-left: 0;
  padding-right: 0;
  opacity: 1;
  cursor: pointer;
  display: block;
  max-height: 100px;
  overflow: hidden;
  padding: 0;
}

.fixed-plugin .dropdown-menu>li>a.img-holder img {
  margin-top: auto;
}

.fixed-plugin .dropdown-menu>li a.switch-trigger:hover,
.fixed-plugin .dropdown-menu>li>a.switch-trigger:focus {
  background-color: transparent;
}

.fixed-plugin .dropdown-menu>li:hover>a.img-holder,
.fixed-plugin .dropdown-menu>li:focus>a.img-holder {
  border-color: rgba(0, 187, 255, 0.53);
}

.fixed-plugin .dropdown-menu>.active>a.img-holder,
.fixed-plugin .dropdown-menu>.active>a.img-holder {
  border-color: #00bbff;
  background-color: #ffffff;
}

.fixed-plugin .btn-social {
  width: 50%;
  display: block;
  width: 48%;
  float: left;
  font-weight: 600;
}

.fixed-plugin .btn-social i {
  margin-right: 5px;
}

.fixed-plugin .btn-social:first-child {
  margin-right: 2%;
}

.fixed-plugin .dropdown .dropdown-menu {
  -webkit-transform: translateY(-15%);
  -moz-transform: translateY(-15%);
  -o-transform: translateY(-15%);
  -ms-transform: translateY(-15%);
  transform: translateY(-15%);
  top: 27px;
  opacity: 0;
  transform-origin: 0 0;
}

.fixed-plugin .dropdown .dropdown-menu:before {
  border-bottom: 0.4em solid rgba(0, 0, 0, 0);
  border-left: 0.4em solid rgba(0, 0, 0, 0.2);
  border-top: 0.4em solid rgba(0, 0, 0, 0);
  right: -16px;
  top: 46px;
}

.fixed-plugin .dropdown .dropdown-menu:after {
  border-bottom: 0.4em solid rgba(0, 0, 0, 0);
  border-left: 0.4em solid #222a42;
  border-top: 0.4em solid rgba(0, 0, 0, 0);
  right: -16px;
}

.fixed-plugin .dropdown .dropdown-menu:before,
.fixed-plugin .dropdown .dropdown-menu:after {
  content: "";
  display: inline-block;
  position: absolute;
  top: 74px;
  width: 16px;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
}

.fixed-plugin .dropdown.show .dropdown-menu {
  opacity: 1;
  -webkit-transform: translateY(-13%);
  -moz-transform: translateY(-13%);
  -o-transform: translateY(-13%);
  -ms-transform: translateY(-13%);
  transform: translateY(-13%);
  transform-origin: 0 0;
}

.fixed-plugin .bootstrap-switch {
  margin: 0;
}

.wrapper {
  position: relative;
  top: 0;
  height: 100vh;

  padding-top: 64px; 
}

.wrapper.wrapper-full-page {
  min-height: 100vh;
  height: auto;
  padding-top: 0; 
}

/* ==========================================================================
   ESTRUCTURA BASE Y PANELES
   ========================================================================== */

.wrapper {
  position: relative;
  top: 0;
  height: 100vh;
}

.main-panel {
  position: relative;
  width: calc(100% - var(--sidebar-context-width));
  margin-left: var(--sidebar-context-width);
  min-height: 100vh;
  background: transparent;
  transition: all 0.33s cubic-bezier(0.685, 0.0473, 0.346, 1);
}

/* Overlay oscuro para móvil */
.sidebar-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(3px);
  z-index: 1055;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.sidebar.is-open ~ .sidebar-overlay {
  opacity: 1;
  pointer-events: all;
}

/* Scrollbars Personalizados */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent; 
}
::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 3px;
  transition: background 0.3s;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
}

/* ==========================================================================
   SIDEBAR GENERAL (RAIL IZQUIERDO)
   ========================================================================== */

.sidebar,
.off-canvas-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--sidebar-rail-width);
  z-index: 1060;
  
  transform: translateX(-100%);
  transition: transform 0.3s cubic-bezier(0.685, 0.0473, 0.346, 1);
  
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-right: 1px solid var(--surface-border);
  box-shadow: 4px 0 20px rgba(0, 0, 0, 0.5);
}

.sidebar.is-open {
  transform: translateX(0);
}

.sidebar .sidebar-wrapper,
.off-canvas-sidebar .sidebar-wrapper {
  width: 100%;
  height: 100%;
  position: relative;
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1rem 0;
  
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.sidebar .sidebar-wrapper::-webkit-scrollbar {
  display: none;
}

/* Lista de Navegación Principal (Iconos Neón) */
.sidebar .nav,
.off-canvas-sidebar .nav {
  display: flex;
  flex-direction: column;
  padding: 0; 
  margin: 0;
  list-style: none;
  width: 80%;
  margin-top: 20px;
}

/* Estilos de los botones principales (Círculos) */
.sidebar .nav > li > a,
.off-canvas-sidebar .nav > li > a {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 48px;
  height: 48px;
  margin: 0.8rem 0;
  border-radius: 50%;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  pointer-events: all;
  border: 1px solid rgba(255, 255, 255, 0.05);
  
  background-image: linear-gradient(to top, rgba(var(--item-color-rgb), 0.8) 0%, rgba(var(--item-color-rgb), 0.1) 100%);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3), inset 0 0 10px rgba(var(--item-color-rgb), 0.2);
}

/* Glow effect para botones principales */
.sidebar .nav > li > a::before {
  content: '';
  position: absolute;
  top: 50%; 
  left: 50%;
  width: 140%; 
  height: 140%;
  background-image: radial-gradient(circle, var(--item-color) 0%, transparent 70%);
  transform: translate(-50%, -50%);
  filter: blur(15px);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: -1;
}

/* Iconos principales */
.sidebar .nav > li > a i,
.off-canvas-sidebar .nav > li > a i {
  font-size: 1.4rem;
  color: var(--item-color);
  z-index: 2;
  transition: transform 0.3s ease;
  text-shadow: 0 0 5px var(--item-color);
}

/* Tooltip flotante para botones principales */
.sidebar .nav > li > a p {
  position: absolute;
  left: 70px;
  top: 50%;
  transform: translateY(-50%);
  padding: 5px 10px;
  border-radius: 4px;
  font-weight: 500;
  font-size: 0.85rem;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 100;
  transition: opacity 0.2s ease;
  box-shadow: 0 2px 10px rgba(0,0,0,0.5);
  border: 1px solid var(--surface-border);
}

/* Colores Neón (nth-child) */
.sidebar .nav li:nth-child(1) > a { --item-color: var(--neon-color-1); --item-color-rgb: var(--neon-color-1-rgb); }
.sidebar .nav li:nth-child(2) > a { --item-color: var(--neon-color-2); --item-color-rgb: var(--neon-color-2-rgb); }
.sidebar .nav li:nth-child(3) > a { --item-color: var(--neon-color-3); --item-color-rgb: var(--neon-color-3-rgb); }
.sidebar .nav li:nth-child(4) > a { --item-color: var(--neon-color-4); --item-color-rgb: var(--neon-color-4-rgb); }
.sidebar .nav li:nth-child(5) > a { --item-color: var(--neon-color-5); --item-color-rgb: var(--neon-color-5-rgb); }
.sidebar .nav li:nth-child(6) > a { --item-color: var(--neon-color-6); --item-color-rgb: var(--neon-color-6-rgb); }

/* Hover States Principales */
.sidebar .nav > li > a:hover {
  transform: scale(1.1);
  box-shadow: 0 0 20px var(--item-color);
  border-color: var(--item-color);
}
.sidebar .nav > li > a:hover::before {
  opacity: 0.6;
}
.sidebar .nav > li > a:hover p {
  opacity: 1;
  visibility: visible;
}

/* Active State Principal */
.sidebar .nav > li.active > a {
  background-color: var(--item-color);
  box-shadow: 0 0 25px var(--item-color);
}
.sidebar .nav > li.active > a i {
  color: #fff;
  transform: scale(1.1);
}

/* ==========================================================================
   --- NUEVO: ESTILOS DE SUBMENÚ EN SIDEBAR GENERAL ---
   Aquí aplicamos el estilo "Contextual" a los items .mobile-submenu
   ========================================================================== */

/* Contenedor del submenú dentro del Sidebar General */
.sidebar .nav .mobile-submenu {
  list-style: none;
  padding: 5px 0;
  margin: 5px 0 15px 0; /* Espacio abajo para separar del siguiente item circular */
  width: 100%;
  display: flex;
  flex-direction: column;
  /* Opcional: Fondo sutil para agrupar */
  background: rgba(255, 255, 255, 0.03); 
  border-radius: 8px;
}

/* Resetear estilos de los items del submenú (para que NO sean círculos) */
.sidebar .nav .mobile-submenu li {
  width: 100%;
  margin: 0;
  padding: 0;
}

.sidebar .nav .mobile-submenu li > a {
  /* Anular estilos del padre circular */
  width: auto !important;
  height: auto !important;
  border-radius: 5px !important;
  margin: 2px 0 !important;
  background-image: none !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border: none !important;
  
  /* Aplicar Estilos del Sidebar de Contexto */
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  padding: 8px 10px !important; /* Un poco más compacto que el contexto por espacio */
  
  color: var(--text-secondary) !important;
  font-size: 0.8rem !important; /* Ligeramente más pequeño para encajar */
  font-weight: 500 !important;
  text-transform: none;
  text-decoration: none;
  transition: all 0.2s ease !important;
}

/* Quitar el pseudo-elemento glow y el tooltip 'p' de los subelementos */
.sidebar .nav .mobile-submenu li > a::before {
  display: none !important;
}
.sidebar .nav .mobile-submenu li > a p {
  display: none !important; /* El texto ya está dentro del <a> en el submenú */
}

/* Hover en Submenú (Igual al Contextual) */
.sidebar .nav .mobile-submenu li > a:hover {
  background-color: rgba(255, 255, 255, 0.05) !important;
  color: var(--text-primary) !important;
  transform: translateX(5px) !important;
}

/* Active en Submenú (Estilo Contextual) */
.sidebar .nav .mobile-submenu li.active > a {
  background-color: rgba(255, 255, 255, 0.1) !important;
  color: var(--text-primary) !important;
  border-left: 3px solid var(--accent-primary) !important; /* Borde izquierdo de color */
}


/* ==========================================================================
   SIDEBAR CONTEXTUAL (EL SECUNDARIO)
   ========================================================================== */

.sidebar-context {
  position: fixed;
  top: var(--navbar-height);
  left: 0;
  bottom: 0;
  width: var(--sidebar-context-width);
  z-index: 1040;
  
  background-color: var(--surface-color);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-right: 1px solid var(--surface-border);
  
  overflow-y: auto;
  transition: transform 0.3s cubic-bezier(0.685, 0.0473, 0.346, 1);
}

.sidebar-context::-webkit-scrollbar {
  width: 4px; 
}
.sidebar-context::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
}
.sidebar-context:hover::-webkit-scrollbar-thumb {
  background: rgba(var(--neon-color-1-rgb), 0.5);
}

.sidebar-context .context-header {
  padding: 1.5rem;
  border-bottom: 1px solid var(--surface-border);
  margin-bottom: 1rem;
}
.sidebar-context .context-header h4 {
  margin: 0.5rem 0 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-primary);
}
.sidebar-context .context-header i {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}

.sidebar-context .nav {
  flex-direction: column;
  padding: 0 1rem;
  width: 100%;
  list-style: none;
}
.sidebar-context .nav li {
  width: 100%;
  margin-bottom: 0.5rem;
}
.sidebar-context .nav li a {
  display: flex;
  align-items: center;
  padding: 0.75rem 1rem;
  color: var(--text-secondary);
  border-radius: 0.5rem;
  transition: all 0.2s ease;
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
}
.sidebar-context .nav li a i {
  margin-right: 12px;
  font-size: 1.1rem;
  color: inherit;
  opacity: 0.8;
}

/* Hover y Active en Context Sidebar */
.sidebar-context .nav li a:hover {
  background-color: rgba(255, 255, 255, 0.05);
  color: var(--text-primary);
  transform: translateX(5px);
}
.sidebar-context .nav li.active a {
  background-color: rgba(255, 255, 255, 0.1);
  color: var(--text-primary);
  border-left: 3px solid var(--accent-primary);
}
.sidebar-context .nav li.active a i {
  color: var(--accent-primary);
  opacity: 1;
}

/* ==========================================================================
   TEMA CLARO (LIGHT MODE)
   ========================================================================== */

[data-theme="light"] .navbar {
  background-color: rgba(255, 255, 255, 0.85) !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05) !important;
}

[data-theme="light"] .sidebar-context {
  background-color: rgba(255, 255, 255, 0.6);
  border-right: 1px solid rgba(0, 0, 0, 0.05);
}

[data-theme="light"] .sidebar-context .context-header h4,
[data-theme="light"] .sidebar-context .nav li a {
  color: #555;
}

[data-theme="light"] .sidebar-context .nav li a:hover {
  background-color: rgba(0, 0, 0, 0.05);
  color: #000;
}

[data-theme="light"] .sidebar-context .nav li.active a {
  background-color: rgba(var(--neon-color-1-rgb), 0.1);
  color: var(--accent-primary);
  font-weight: 600;
}

[data-theme="light"] .sidebar {
  background-color: rgba(240, 240, 245, 0.95);
  border-right: 1px solid rgba(0,0,0,0.1);
}
[data-theme="light"] .sidebar .nav > li > a {
  background-image: linear-gradient(to top, #e0e0e0 0%, #f5f5f5 100%);
  border: 1px solid #fff;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
[data-theme="light"] .sidebar .nav > li > a i {
  color: #555;
  text-shadow: none;
}
[data-theme="light"] .sidebar .nav > li.active > a {
  background: #fff;
  border-color: var(--accent-primary);
}
[data-theme="light"] .sidebar .nav > li.active > a i {
  color: var(--accent-primary);
}

/* Correcciones para submenú en tema claro */
[data-theme="light"] .sidebar .nav .mobile-submenu {
  background: rgba(0, 0, 0, 0.03);
}
[data-theme="light"] .sidebar .nav .mobile-submenu li > a {
  color: #666 !important;
}
[data-theme="light"] .sidebar .nav .mobile-submenu li > a:hover {
  background-color: rgba(0,0,0,0.05) !important;
  color: #000 !important;
}
[data-theme="light"] .sidebar .nav .mobile-submenu li.active > a {
  background-color: rgba(var(--neon-color-1-rgb), 0.1) !important;
  color: var(--accent-primary) !important;
}

/* ==========================================================================
   TOGGLER Y RESPONSIVE
   ========================================================================== */

#toggleGeneralSidebar {
    cursor: pointer;
    margin: 0 !important; 
    padding: 5px;
    border-radius: 50%;
    transition: background-color 0.2s ease;
}

#toggleGeneralSidebar:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

[data-theme="light"] #toggleGeneralSidebar:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

#toggleGeneralSidebar .navbar-toggler-bar {
    background-color: var(--text-primary);
    height: 2px; 
    width: 20px;
    margin: 4px auto;
}

@media screen and (max-width: 991px) {
  
  .sidebar-context {
    transform: translateX(-100%); 
    z-index: 1035;
  }

  .main-panel { 
    width: 100%; 
    margin-left: 0; 
    padding-top: calc(var(--navbar-height) + 10px);
  }

  .sidebar {
    width: 280px; 
    background-color: rgba(20, 20, 22, 0.98);
  }

  .sidebar .nav > li > a {
    width: 100%;
    height: auto;
    border-radius: 10px;
    margin: 0.5rem 1rem;
    justify-content: flex-start;
    padding: 10px 15px;
    background-image: none !important;
    box-shadow: none !important;
    border: none;
  }
  
  .sidebar .nav > li > a i {
    margin-right: 15px;
  }
  
  .sidebar .nav > li > a p {
    position: static;
    transform: none;
    opacity: 1;
    visibility: visible;
    background: transparent;
    box-shadow: none;
    padding: 0;
    border: none;
  }
  
  .sidebar .nav > li.active > a {
    background-color: rgba(255, 255, 255, 0.1);
  }
  
  /* Ajustar el submenú en móvil para que se vea integrado */
  .sidebar .nav .mobile-submenu {
      padding-left: 20px; /* Indentación en móvil */
      background: transparent;
  }
}


.color-swatch {
  margin: 1rem 0;
  border-radius: .5rem;
  background-color: var(--surface-color);
  border: 1px solid var(--surface-border);
  width: 100% !important;
  height: auto !important;
}

.color-swatch:after { content: " "; display: table; clear: both; }

.color-swatch-header {
  position: relative;
  height: 0;
  padding-bottom: 50%;
  border-radius: .5rem .5rem 0 0;
  border: 1px solid transparent;
}
.color-swatch-header.is-light { border-color: var(--surface-border); }

.color-swatch-body {
  padding: 1rem;
  color: var(--text-secondary);
}


.bd-example {
    padding: 1.5rem;
    margin: 1rem -15px;
    border: solid var(--surface-border);
    border-width: 1px 0;
    background: var(--background-gradient); /* Para que los ejemplos tengan el fondo correcto */
}

.bd-example .row > .col span,
.bd-example .row > [class^=col-] span {
  font-size: 0.75rem;
  display: block;
  margin: 1rem 0;
  padding: .75rem;
  color: var(--text-primary);
  background-color: var(--surface-color);
  border: 1px solid var(--surface-border);
  border-radius: 0.5rem;
}

.bd-docs .navbar .navbar-brand {
  position: relative;
}

/* Animations */
.nav-pills .nav-link,
.navbar,
.nav-tabs .nav-link,
.sidebar .nav a,
.sidebar .nav a i,
.sidebar .nav p,
.navbar-collapse .navbar-nav .nav-link,
.animation-transition-general,
.sidebar .nav p,
.off-canvas-sidebar .nav p,
.sidebar .logo a.logo-mini,
.sidebar .logo a.logo-normal,
.off-canvas-sidebar .logo a.logo-mini,
.off-canvas-sidebar .logo a.logo-normal,
.sidebar .user .photo,
.off-canvas-sidebar .user .photo,
.sidebar .user a,
.off-canvas-sidebar .user a,
.sidebar .user .info>a>span,
.off-canvas-sidebar .user .info>a>span,
.tag,
.tag [data-role="remove"],
.animation-transition-general,
.sidebar .nav p,
.off-canvas-sidebar .nav p,
.sidebar .logo a.logo-mini,
.sidebar .logo a.logo-normal,
.off-canvas-sidebar .logo a.logo-mini,
.off-canvas-sidebar .logo a.logo-normal,
.sidebar .user .photo,
.off-canvas-sidebar .user .photo,
.sidebar .user a,
.off-canvas-sidebar .user a,
.sidebar .user .info>a>span,
.off-canvas-sidebar .user .info>a>span {
  -webkit-transition: all 300ms ease 0s;
  -moz-transition: all 300ms ease 0s;
  -o-transition: all 300ms ease 0s;
  -ms-transition: all 300ms ease 0s;
  transition: all 300ms ease 0s;
}

.bootstrap-switch-label:before,
.caret {
  -webkit-transition: all 150ms ease 0s;
  -moz-transition: all 150ms ease 0s;
  -o-transition: all 150ms ease 0s;
  -ms-transition: all 150ms ease 0s;
  transition: all 150ms ease 0s;
}

.dropdown-toggle[aria-expanded="true"]:after,
a[data-toggle="collapse"][aria-expanded="true"] .caret,
.card-collapse .card a[data-toggle="collapse"][aria-expanded="true"] i,
.card-collapse .card a[data-toggle="collapse"].expanded i {
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}

.caret {
  width: 0;
  height: 0;
  vertical-align: middle;
  border-top: 4px dashed;
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
  margin-top: -5px;
  position: absolute;
  top: 30px;
  margin-left: 5px;
}

.pull-left {
  float: left;
}

.pull-right {
  float: right;
}

.card form label+.form-control {
  margin-bottom: 20px;
}

.card .map-title {
  color: #ffffff;
}

.card.card-chart .gmnoprint,
.card.card-chart .gm-style-cc {
  display: none !important;
}

.bd-docs h1,
.bd-docs h2,
.bd-docs h3,
.bd-docs h4,
.bd-docs h5,
.bd-docs h6,
.bd-docs p,
.bd-docs ul li,
.bd-docs ol li {
  color: #2c2c2c;
}

.bd-docs .bd-content>table>thead>tr>th {
  color: #222a42;
}

.bd-docs .blockquote,
.bd-docs .blockquote p,
.bd-docs .card p {
  color: rgba(255, 255, 255, 0.8);
}

.bd-docs .bd-example {
  background: linear-gradient(#1e1e2f, #1e1e24);
}

.bd-docs .navbar {
  border-top: none;
}

.bd-docs .navbar .navbar-nav .nav-link {
  color: rgba(255, 255, 255, 0.8) !important;
}

.bd-docs .bd-example .btn {
  margin: 4px 0;
}

.bd-docs .bd-example .btn .badge {
  display: inline-block;
}

.bd-docs .bd-example .tim-icons {
  color: #ffffff;
}

.bd-docs .bd-example .popover .popover-header {
  color: rgba(181, 181, 181, 0.6);
}

.bd-docs .bd-example .popover-body p {
  color: #212529;
}

.bd-docs .bd-example.tooltip-demo p {
  color: rgba(255, 255, 255, 0.8);
}

.bd-docs .card.card-body,
.bd-docs .card .card-body {
  color: rgba(255, 255, 255, 0.8);
}

.bd-docs label,
.bd-docs .form-check {
  color: rgba(255, 255, 255, 0.8);
}

.bd-docs .form-check+.btn {
  margin-top: 20px;
}

.bd-docs .bd-example thead th,
.bd-docs table thead th {
  color: rgba(255, 255, 255, 0.8);
}

.bd-docs .bd-example h1,
.bd-docs .bd-example h2,
.bd-docs .bd-example h3,
.bd-docs .bd-example h4,
.bd-docs .bd-example h5,
.bd-docs .bd-example h6,
.bd-docs .bd-example .h1,
.bd-docs .bd-example .h2,
.bd-docs .bd-example .h3,
.bd-docs .bd-example .h4,
.bd-docs .bd-example .h5,
.bd-docs .bd-example .h6,
.bd-docs table h1,
.bd-docs table h2,
.bd-docs table h3,
.bd-docs table h4,
.bd-docs table h5,
.bd-docs table h6,
.bd-docs table .h1,
.bd-docs table .h2,
.bd-docs table .h3,
.bd-docs table .h4,
.bd-docs table .h5,
.bd-docs table .h6 {
  color: rgba(255, 255, 255, 0.8);
}

.bd-docs .bd-example .datepicker thead th,
.bd-docs .bd-example .datepicker table thead th,
.bd-docs .bd-example .datepicker .tim-icons,
.bd-docs table .datepicker thead th,
.bd-docs table .datepicker table thead th,
.bd-docs table .datepicker .tim-icons {
  color: #e14eca;
}

.bd-docs .bd-example .picker-switch .tim-icons,
.bd-docs table .picker-switch .tim-icons {
  color: #e14eca;
}

.bd-docs .footer .container-fluid>nav {
  display: inline-block;
}

.modal.show .modal-dialog {
  -webkit-transform: translate(0, 30%);
  transform: translate(0, 30%);
}

code {
  color: #f3a4b5;
}

@media screen and (max-width: 991px) {
  .profile-photo .profile-photo-small {
    margin-left: -2px;
  }

  .button-dropdown {
    display: none;
  }

  #searchModal .modal-dialog {
    margin: 20px;
  }


}

@media screen and (max-width: 768px) {
  .landing-page .section-story-overview .image-container:nth-child(2) {
    margin-left: 0;
    margin-bottom: 30px;
  }
}

@media screen and (max-width: 576px) {
  .page-header .container h6.category-absolute {
    width: 90%;
  }

  .form-horizontal .col-form-label,
  .form-horizontal .label-on-right {
    text-align: inherit;
    padding-top: 0;
  }

  .form-horizontal .col-form-label code,
  .form-horizontal .label-on-right code {
    padding: 0 10px;
  }
}



.form-group.has-danger .error,
.input-group.has-danger .error {
  color: #ec250d;
}

.form-group.has-success .error,
.input-group.has-success .error {
  color: #00f2c3;
}

.form-group.no-border.form-control-lg .input-group-append .input-group-text,
.input-group.no-border.form-control-lg .input-group-append .input-group-text {
  padding: 15px 0 15px 19px;
}

.form-group.no-border.form-control-lg .form-control,
.input-group.no-border.form-control-lg .form-control {
  padding: 15px 19px;
}

.form-group.no-border.form-control-lg .form-control+.input-group-prepend .input-group-text,
.form-group.no-border.form-control-lg .form-control+.input-group-append .input-group-text,
.input-group.no-border.form-control-lg .form-control+.input-group-prepend .input-group-text,
.input-group.no-border.form-control-lg .form-control+.input-group-append .input-group-text {
  padding: 15px 19px 15px 0;
}

.form-group.form-control-lg .form-control,
.input-group.form-control-lg .form-control {
  padding: 14px 18px;
  height: 100%;
}

.form-group.form-control-lg .form-control+.input-group-prepend .input-group-text,
.form-group.form-control-lg .form-control+.input-group-append .input-group-text,
.input-group.form-control-lg .form-control+.input-group-prepend .input-group-text,
.input-group.form-control-lg .form-control+.input-group-append .input-group-text {
  padding: 14px 18px 14px 0;
}

.form-group.form-control-lg .input-group-prepend .input-group-text,
.form-group.form-control-lg .input-group-append .input-group-text,
.input-group.form-control-lg .input-group-prepend .input-group-text,
.input-group.form-control-lg .input-group-append .input-group-text {
  padding: 14px 0 15px 18px;
}

.form-group.form-control-lg .input-group-prepend .input-group-text+.form-control,
.form-group.form-control-lg .input-group-append .input-group-text+.form-control,
.input-group.form-control-lg .input-group-prepend .input-group-text+.form-control,
.input-group.form-control-lg .input-group-append .input-group-text+.form-control {
  padding: 15px 18px 15px 16px;
}

.form-group.no-border .form-control,
.input-group.no-border .form-control {
  padding: 11px 19px;
}

.form-group.no-border .form-control+.input-group-prepend .input-group-text,
.form-group.no-border .form-control+.input-group-append .input-group-text,
.input-group.no-border .form-control+.input-group-prepend .input-group-text,
.input-group.no-border .form-control+.input-group-append .input-group-text {
  padding: 11px 19px 11px 0;
}

.form-group.no-border .input-group-prepend .input-group-text,
.form-group.no-border .input-group-append .input-group-text,
.input-group.no-border .input-group-prepend .input-group-text,
.input-group.no-border .input-group-append .input-group-text {
  padding: 11px 0 11px 19px;
}

.form-group .form-control,
.input-group .form-control {
  padding: 10px 18px 10px 18px;
}

.form-group .form-control+.input-group-prepend .input-group-text,
.form-group .form-control+.input-group-append .input-group-text,
.input-group .form-control+.input-group-prepend .input-group-text,
.input-group .form-control+.input-group-append .input-group-text {
  padding: 10px 18px 10px 0;
}

.form-group .input-group-prepend .input-group-text,
.form-group .input-group-append .input-group-text,
.input-group .input-group-prepend .input-group-text,
.input-group .input-group-append .input-group-text {
  padding: 10px 0 10px 18px;
}

.form-group .input-group-prepend .input-group-text+.form-control,
.form-group .input-group-prepend .input-group-text~.form-control,
.form-group .input-group-append .input-group-text+.form-control,
.form-group .input-group-append .input-group-text~.form-control,
.input-group .input-group-prepend .input-group-text+.form-control,
.input-group .input-group-prepend .input-group-text~.form-control,
.input-group .input-group-append .input-group-text+.form-control,
.input-group .input-group-append .input-group-text~.form-control {
  padding: 10px 19px 11px 16px;
}

.form-group.no-border .form-control,
.form-group.no-border .form-control+.input-group-prepend .input-group-text,
.form-group.no-border .form-control+.input-group-append .input-group-text,
.input-group.no-border .form-control,
.input-group.no-border .form-control+.input-group-prepend .input-group-text,
.input-group.no-border .form-control+.input-group-append .input-group-text {
  background-color: #242c45;
  border: medium none;
}

.form-group.no-border .form-control:focus,
.form-group.no-border .form-control:active,
.form-group.no-border .form-control:active,
.form-group.no-border .form-control+.input-group-prepend .input-group-text:focus,
.form-group.no-border .form-control+.input-group-prepend .input-group-text:active,
.form-group.no-border .form-control+.input-group-prepend .input-group-text:active,
.form-group.no-border .form-control+.input-group-append .input-group-text:focus,
.form-group.no-border .form-control+.input-group-append .input-group-text:active,
.form-group.no-border .form-control+.input-group-append .input-group-text:active,
.input-group.no-border .form-control:focus,
.input-group.no-border .form-control:active,
.input-group.no-border .form-control:active,
.input-group.no-border .form-control+.input-group-prepend .input-group-text:focus,
.input-group.no-border .form-control+.input-group-prepend .input-group-text:active,
.input-group.no-border .form-control+.input-group-prepend .input-group-text:active,
.input-group.no-border .form-control+.input-group-append .input-group-text:focus,
.input-group.no-border .form-control+.input-group-append .input-group-text:active,
.input-group.no-border .form-control+.input-group-append .input-group-text:active {
  border: medium none;
  background-color: #252e49;
}

.form-group.no-border .form-control:focus+.input-group-prepend .input-group-text,
.form-group.no-border .form-control:focus+.input-group-append .input-group-text,
.input-group.no-border .form-control:focus+.input-group-prepend .input-group-text,
.input-group.no-border .form-control:focus+.input-group-append .input-group-text {
  background-color: #252e49;
}

.form-group.no-border .input-group-prepend .input-group-text,
.form-group.no-border .input-group-append .input-group-text,
.input-group.no-border .input-group-prepend .input-group-text,
.input-group.no-border .input-group-append .input-group-text {
  background-color: #242c45;
  border: none;
}

.has-error .form-control-feedback,
.has-error .control-label {
  color: #ec250d;
}

.has-success .form-control-feedback,
.has-success .control-label {
  color: #00f2c3;
}

.input-group-append .input-group-text,
.input-group-prepend .input-group-text {
  background-color: transparent;
  border: 1px solid #2b3553;
  border-radius: 0.4285rem;
  color: #ffffff;
  -webkit-transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out, background-color 0.3s ease-in-out;
  -moz-transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out, background-color 0.3s ease-in-out;
  -o-transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out, background-color 0.3s ease-in-out;
  -ms-transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out, background-color 0.3s ease-in-out;
  transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out, background-color 0.3s ease-in-out;
}

.input-group-append .input-group-text i,
.input-group-prepend .input-group-text i {
  opacity: .5;
}

.has-danger.input-group-focus .input-group-append .input-group-text,
.has-danger.input-group-focus .input-group-prepend .input-group-text {
  background-color: transparent;
}

.has-success .input-group-append .input-group-text,
.has-success .input-group-prepend .input-group-text {
  background-color: transparent;
}

.has-danger .form-control:focus+.input-group-append .input-group-text,
.has-danger .form-control:focus+.input-group-prepend .input-group-text {
  color: #ec250d;
}

.has-success .form-control:focus+.input-group-append .input-group-text,
.has-success .form-control:focus+.input-group-prepend .input-group-text {
  color: #00f2c3;
}

.input-group-append .input-group-text+.form-control,
.input-group-append .input-group-text~.form-control,
.input-group-prepend .input-group-text+.form-control,
.input-group-prepend .input-group-text~.form-control {
  padding: -0.5rem 0.7rem;
  padding-left: 18px;
}

.input-group-append .input-group-text i,
.input-group-prepend .input-group-text i {
  width: 17px;
}

.input-group-append,
.input-group-prepend .input-group-text,
.input-group-prepend .input-group-text {
  background-color: transparent;
  border: 1px solid #2b3553;
  border-radius: 0.4285rem;
  color: #ffffff;
  margin: 0;
}

.input-group-append .input-group-text {
  border-left: none;
}

.input-group-prepend .input-group-text {
  border-right: none;
}

.input-group-focus .input-group-prepend .input-group-text,
.input-group-focus .input-group-append .input-group-text {
  background-color: #ffffff;
  border-color: #e14eca;
  background-color: transparent;
  border-color: #e14eca;
}

.input-group-focus.no-border .input-group-prepend .input-group-text,
.input-group-focus.no-border .input-group-append .input-group-text {
  background-color: #252e49;
}

.input-group,
.form-group {
  margin-bottom: 10px;
  position: relative;
}

.input-group .form-control-static,
.form-group .form-control-static {
  margin-top: 9px;
}

.input-group[disabled] .input-group-prepend .input-group-text,
.input-group[disabled] .input-group-append .input-group-text {
  background-color: #E3E3E3;
}

.input-group .form-control:not(:first-child):not(:last-child),
.input-group-btn:not(:first-child):not(:last-child) {
  border-radius: 0.4285rem;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-left: 0 none;
}

.input-group .form-control:first-child,
.input-group-btn:first-child>.dropdown-toggle,
.input-group-btn:last-child>.btn:not(:last-child):not(.dropdown-toggle) {
  border-right: 0 none;
}

.input-group .form-control:last-child,
.input-group-btn:last-child>.dropdown-toggle,
.input-group-btn:first-child>.btn:not(:first-child) {
  border-left: 0 none;
}

.form-control[disabled],
.form-control[readonly],
fieldset[disabled] .form-control {
  background-color: #1d253b;
  color: #344675;
  cursor: not-allowed;
}

.input-group-btn .btn {
  border-width: 1px;
  padding: 11px 0.7rem;
}

.input-group-btn .btn-default:not(.btn-fill) {
  border-color: #DDDDDD;
}

.input-group-btn:last-child>.btn {
  margin-left: 0;
}

textarea.form-control {
  max-width: 100%;
  max-height: 80px;
  padding: 10px 10px 0 0;
  resize: none;
  border: none;
  border-bottom: 1px solid #2b3553;
  border-radius: 0;
  line-height: 2;
}

textarea.form-control:focus,
textarea.form-control:active {
  border-left: none;
  border-top: none;
  border-right: none;
}

.has-success.form-group .form-control,
.has-success.form-group.no-border .form-control,
.has-danger.form-group .form-control,
.has-danger.form-group.no-border .form-control {
  padding-right: 40px;
}

.form.form-newsletter .form-group {
  float: left;
  width: 78%;
  margin-right: 2%;
  margin-top: 9px;
}

.input-group .input-group-btn {
  padding: 0 12px;
}

.form-group input[type=file] {
  opacity: 0;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 100;
}

.form-text {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.8);
}

.form-control-lg {
  padding: 0;
  font-size: inherit;
  line-height: 0;
  border-radius: 0;
}

.form-control-lg .form-control {
  height: calc(2.875rem + 2px);
}

.form-horizontal .col-form-label,
.form-horizontal .label-on-right {
  padding: 10px 5px 0 15px;
  text-align: right;
  max-width: 180px;
}

.form-horizontal .checkbox-radios {
  margin-bottom: 15px;
}

.form-horizontal .checkbox-radios .form-check:first-child {
  margin-top: 8px;
}

.form-horizontal .label-on-right {
  text-align: left;
  padding: 10px 15px 0 5px;
}

.form-horizontal .form-check-inline {
  margin-top: 6px;
}

.form-horizontal .form-check-inline .form-check-label {
  margin-right: 1.5rem;
}

.search-bar {
  margin-left: 30px;
}

.search-bar .btn {
  margin: 0;
}

.search-bar.input-group {
  border-radius: 25px;
  z-index: 4;
  margin-bottom: 0;
  height: 43px;
  padding-right: 5px;
}

.search-bar.input-group .input-group-addon {
  padding: 10px;
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.7);
}

.search-bar.input-group i {
  font-size: 20px;
  margin-top: 0 !important;
}

.search-bar.input-group input {
  background: transparent;
  border: none !important;
  border-radius: 0;
  padding: 12px !important;
  font-size: 12px;
  opacity: 0.5;
}

.search-bar.input-group input:focus {
  background: transparent;
}

.search-bar.input-group .form-control {
  opacity: 1;
  color: #ffffff;
}

.search-bar.input-group .form-control::placeholder {
  color: white;
}

.modal-search .modal-dialog {
  max-width: 1000px;
  margin: 20px auto;
}

.modal-search .modal-dialog .form-control {
  border: none;
  color: #222a42;
}

.modal-search .modal-dialog .form-control::placeholder {
  color: #222a42;
}

.input-group-prepend {
  margin-right: 0;
}

.input-group-prepend .tim-icons,
.input-group-append .tim-icons {
  font-size: 1rem;
}

/*
 * Container style
 */
.ps {
  overflow: hidden !important;
  overflow-anchor: none;
  -ms-overflow-style: none;
  touch-action: auto;
  -ms-touch-action: auto;
}

/*
 * Scrollbar rail styles
 */
.ps__rail-x {
  display: none;
  opacity: 0;
  transition: background-color .2s linear, opacity .2s linear;
  -webkit-transition: background-color .2s linear, opacity .2s linear;
  height: 15px;
  /* there must be 'bottom' or 'top' for ps__rail-x */
  bottom: 0px;
  /* please don't change 'position' */
  position: absolute;
}

.ps__rail-y {
  display: none;
  opacity: 0;
  transition: background-color .2s linear, opacity .2s linear;
  -webkit-transition: background-color .2s linear, opacity .2s linear;
  width: 15px;
  /* there must be 'right' or 'left' for ps__rail-y */
  right: 0;
  /* please don't change 'position' */
  position: absolute;
}

.ps--active-x>.ps__rail-x,
.ps--active-y>.ps__rail-y {
  display: block;
  background-color: transparent;
}

.ps:hover>.ps__rail-x,
.ps:hover>.ps__rail-y,
.ps--focus>.ps__rail-x,
.ps--focus>.ps__rail-y,
.ps--scrolling-x>.ps__rail-x,
.ps--scrolling-y>.ps__rail-y {
  opacity: 0.6;
}

.ps .ps__rail-x:hover,
.ps .ps__rail-y:hover,
.ps .ps__rail-x:focus,
.ps .ps__rail-y:focus,
.ps .ps__rail-x.ps--clicking,
.ps .ps__rail-y.ps--clicking {
  background-color: #eee;
  opacity: 0.9;
}

/*
 * Scrollbar thumb styles
 */
.ps__thumb-x {
  background-color: #aaa;
  border-radius: 6px;
  transition: background-color .2s linear, height .2s ease-in-out;
  -webkit-transition: background-color .2s linear, height .2s ease-in-out;
  height: 6px;
  /* there must be 'bottom' for ps__thumb-x */
  bottom: 2px;
  /* please don't change 'position' */
  position: absolute;
}

.ps__thumb-y {
  background-color: #aaa;
  border-radius: 6px;
  transition: background-color .2s linear, width .2s ease-in-out;
  -webkit-transition: background-color .2s linear, width .2s ease-in-out;
  width: 6px;
  /* there must be 'right' for ps__thumb-y */
  right: 2px;
  /* please don't change 'position' */
  position: absolute;
}

.ps__rail-x:hover>.ps__thumb-x,
.ps__rail-x:focus>.ps__thumb-x,
.ps__rail-x.ps--clicking .ps__thumb-x {
  background-color: #999;
  height: 11px;
}

.ps__rail-y:hover>.ps__thumb-y,
.ps__rail-y:focus>.ps__thumb-y,
.ps__rail-y.ps--clicking .ps__thumb-y {
  background-color: #999;
  width: 11px;
}

/* MS supports */
@supports (-ms-overflow-style: none) {
  .ps {
    overflow: auto !important;
  }
}

@media screen and (-ms-high-contrast: active),
(-ms-high-contrast: none) {
  .ps {
    overflow: auto !important;
  }
}

/*!
Animate.css - http://daneden.me/animate
Licensed under the MIT license - http://opensource.org/licenses/MIT

Copyright (c) 2015 Daniel Eden
*/
.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.animated.infinite {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

.animated.hinge {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
}

.animated.bounceIn,
.animated.bounceOut {
  -webkit-animation-duration: .75s;
  animation-duration: .75s;
}

.animated.flipOutX,
.animated.flipOutY {
  -webkit-animation-duration: .75s;
  animation-duration: .75s;
}

@-webkit-keyframes shake {

  from,
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  10%,
  30%,
  50%,
  70%,
  90% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }

  20%,
  40%,
  60%,
  80% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }
}

@keyframes shake {

  from,
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  10%,
  30%,
  50%,
  70%,
  90% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }

  20%,
  40%,
  60%,
  80% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }
}

.shake {
  -webkit-animation-name: shake;
  animation-name: shake;
}

@-webkit-keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.fadeInDown {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
}

@-webkit-keyframes fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

.fadeOut {
  -webkit-animation-name: fadeOut;
  animation-name: fadeOut;
}

@-webkit-keyframes fadeOutDown {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}

@keyframes fadeOutDown {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}

.fadeOutDown {
  -webkit-animation-name: fadeOutDown;
  animation-name: fadeOutDown;
}

@-webkit-keyframes fadeOutUp {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}

@keyframes fadeOutUp {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}

.fadeOutUp {
  -webkit-animation-name: fadeOutUp;
  animation-name: fadeOutUp;
}


.card {
  margin-bottom: 30px; 
}

.card label {
  color: var(--text-secondary); /* Las etiquetas dentro de las tarjetas usan el color secundario */
  font-size: 0.75rem;
  margin-bottom: 5px;
}

.card .card-title {
  margin-bottom: 0.75rem;
  color: var(--text-primary);
}

.card .card-body {
  padding: 1.5rem; /* Estandarizamos el padding */
  flex: 1 1 auto;
}

.card .card-body.table-full-width {
  padding-left: 0;
  padding-right: 0;
}

.card .card-body .card-description,
.card .card-body .card-category {
  color: var(--text-secondary);
}

.card .card-header {
  padding: 1.5rem 1.5rem 0; /* Ajustamos el padding para un look más limpio */
  border: 0;
  color: var(--text-primary);
  background-color: transparent;
}

.card .card-header .card-category {
  color: var(--text-secondary);
  margin-bottom: 5px;
  font-weight: 400;
}

.card .map {
  border-radius: 1rem;
}

.card .map.map-big {
  height: 420px;
}


/* --- Variante de Tarjeta Plana (Sin efecto de vidrio) --- */

.card.card-plain {
  background: transparent;
  box-shadow: none;
  border: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.card.card-plain .card-header,
.card.card-plain .card-footer {
  background-color: transparent;
}


.card .image {
  overflow: hidden;
  height: 200px;
  position: relative;
  border-radius: 1rem 1rem 0 0; /* Asegurar que la imagen respete los bordes */
}

.card .avatar {
  width: 40px;
  height: 40px;
  overflow: hidden;
  border-radius: 50%;
  margin-bottom: 1rem;
}

.card .card-footer .stats {
  color: var(--text-secondary);
}

.card .card-footer .stats i {
  margin-right: 5px;
  position: relative;
}

.card .card-footer h6 {
  margin-bottom: 0;
  padding: 7px 0;
}


/* --- Tarjeta de Gráficos (`.card-chart`) --- */

.card-chart {
  overflow: hidden;
}

.card-chart .card-header .card-title i {
  font-size: 1rem;
  margin-right: 0.5rem;
  color: var(--text-secondary);
}

.card-chart .card-body {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.card-chart .table td {
  border-top: none;
  border-bottom: 1px solid var(--surface-border);
}

.card-chart .chart-area {
  height: 220px;
  width: 100%;
}

.card-chart .card-footer {
  margin-top: 1rem;
}

.card-chart .dropdown {
  position: absolute;
  right: 1.25rem;
  top: 1.25rem;
}

.card-chart .dropdown .btn {
  margin: 0;
}


/* --- Tarjeta de Usuario (`.card-user`) --- */

.card-user {
  overflow: hidden;
}

.card-user .image {
  height: 120px;
}

.card-user .author {
  text-align: center;
  text-transform: none;
  margin-top: -70px; /* Sube el contenido para que el avatar se superponga */
  position: relative;
  z-index: 1;
}

.card-user .author a + p.description {
  margin-top: -0.5rem;
}

/* Bloques decorativos con el color de acento del tema */
.card-user .author .block {
  position: absolute;
  height: 100px;
  width: 250px;
  /* El color de fondo ahora es dinámico */
  background: linear-gradient(to right, rgba(48, 240, 192, 0.4) 0%, rgba(48, 240, 192, 0) 100%);
}
[data-theme="light"] .card-user .author .block {
    background: linear-gradient(to right, rgba(94, 114, 228, 0.4) 0%, rgba(94, 114, 228, 0) 100%);
}


.card-user .author .block.block-one {
  transform: rotate(150deg);
  margin-top: -90px;
  margin-left: -50px;
}
.card-user .author .block.block-two {
  transform: rotate(30deg);
  margin-top: -40px;
  margin-left: -100px;
}
.card-user .author .block.block-three {
  transform: rotate(170deg);
  margin-top: -70px;
  right: -45px;
}
.card-user .author .block.block-four {
  transform: rotate(150deg);
  margin-top: -25px;
  right: -45px;
}

.card-user .avatar {
  width: 124px;
  height: 124px;
  border: 5px solid var(--surface-border);
  background-color: var(--surface-color);
  position: relative;
  margin: 0 auto 1rem;
}

.card-user .card-body {
  min-height: 240px;
}

.card-user hr {
  margin: 0.5rem 1.5rem;
}

.card-user .button-container {
  margin-bottom: 6px;
  text-align: center;
}

.card-user .card-description {
  margin-top: 2rem;
  padding: 0 1.5rem;
}


/* --- Tarjeta de Tareas (`.card-tasks`) --- */

.card-tasks .table-full-width {
  max-height: 410px;
  position: relative;
}

.card-tasks .card-header .title {
  margin-right: 1.25rem;
  font-weight: 500;
}

.card-tasks .card-header .dropdown {
  float: right;
  color: var(--text-secondary);
}

.card-tasks .card-body i {
  color: var(--text-secondary);
  font-size: 1.4em;
  transition: color 0.2s ease-in-out;
}

.card-tasks .card-body i:hover {
  color: var(--text-primary);
}



.card .form-control option {
  background: var(--surface-color) !important; 
  color: var(--text-primary) !important;     
}

.card .form-control option:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  color: var(--text-primary) !important;
}
[data-theme="light"] .card .form-control option:hover {
    background: rgba(0, 0, 0, 0.1) !important;
}