.kt-select-tag {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--spacing) * 0.75);
  border-radius: var(--radius);
  padding-inline: calc(var(--spacing) * 1.25);
  padding-block: 1px;
  font-size: 0.75rem; /* ~12px */
  line-height: 1.05;
  --tw-font-weight: var(--font-weight-medium);
  font-weight: var(--font-weight-medium);
  border-style: var(--tw-border-style);
  border-width: 1px;
  border-color: var(--color-gray-200);
  background-color: var(--color-gray-50);
  color: var(--color-gray-700);
  transition: all 200ms var(--tw-ease, var(--default-transition-timing-function));
  max-width: 150px;
  flex-shrink: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.08));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  &:hover { @media (hover: hover) { border-color: var(--color-gray-300); background-color: var(--color-gray-100); } }
}

.kt-select-tag-remove {
  display: flex;
  height: calc(var(--spacing) * 3.5);
  width:  calc(var(--spacing) * 3.5);
  align-items: center;
  justify-content: center;
  border-radius: calc(infinity * 1px);
  color: var(--color-gray-500);
  cursor: pointer;
  transition: all 200ms var(--tw-ease, var(--default-transition-timing-function));
  flex-shrink: 0;
  opacity: 0.8;
  &:hover { @media (hover: hover) { background-color: var(--color-gray-200); color: var(--color-gray-700); opacity: 1; } }
  &:hover { @media (hover: hover) { --tw-scale-x: 110%; --tw-scale-y: 110%; --tw-scale-z: 110%; scale: var(--tw-scale-x) var(--tw-scale-y); } }
}
.kt-select-tag-remove svg {
  height: calc(var(--spacing) * 2.5);
  width:  calc(var(--spacing) * 2.5);
  transition: transform 200ms var(--tw-ease, var(--default-transition-timing-function));
}
.kt-select-tag-remove:hover svg { transform: scale(1.1); }

.kt-select-display[data-multiple='true'] {
  display: flex;
  min-height: 2rem; /* antes 3rem, luego 2.25rem */
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--spacing) * 0.75);
  padding-block: calc(var(--spacing) * 0.75);
  padding-inline: calc(var(--spacing) * 1.5);
  width: 100%;
  border-radius: calc(var(--radius) - 2px);
  border-style: var(--tw-border-style);
  border-width: 1px;
  border-color: var(--color-gray-200);
  background-color: var(--color-white);
  transition: all 200ms var(--tw-ease, var(--default-transition-timing-function));
  &:focus-within { border-color: var(--color-blue-300); --tw-ring-color: var(--color-blue-100);
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
}

/* === DEGRADADO MIIND === */

.moving-gradient{ background: linear-gradient(90deg,#DFBB19 0%,#12C79C 32.67%,#1951E0 67.17%,#D618A3 100%);
        background-size: 300% 100%; background-repeat: no-repeat; animation: panGradient 20s linear infinite alternate;}
        @keyframes panGradient{ 0% { background-position: 0% 50%; } 100% { background-position: 100% 50%; }}
        .gradient-text { background: linear-gradient(90deg,#DFBB19 0%,#12C79C 32.67%,#1951E0 67.17%,#D618A3 100%);
        -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; color: transparent;}

.moving-nuevo{ background: #21cd40; animation: none;}
.moving-editar{ background: #2c74f0; animation: none;}
.moving-eliminar{ background: #8B0000; animation: none;}
.moving-info{ background: #a539b4; animation: none;}
.moving-otros{ background: #767676; animation: none;}

/* === KTUI ADDON: success, warning, info + outline de secondary === */

/* ===== FILLED ===== */
.kt-btn.kt-btn-success{background-color:var(--color-green-500);color:var(--color-white);}
.kt-btn.kt-btn-warning{background-color:var(--color-yellow-500);color:var(--color-white);}
.kt-btn.kt-btn-info{background-color:var(--color-violet-600);color:var(--color-white);}

/* Hover consistente con tu patrón */
@media (hover:hover){
  .kt-btn.kt-btn-success:hover{background-color:var(--color-green-500);}
  .kt-btn.kt-btn-warning:hover{background-color:var(--color-yellow-500);}
  .kt-btn.kt-btn-info:hover{background-color:var(--color-violet-600);}
}
@supports (color: color-mix(in lab, red, red)){
  @media (hover:hover){
    .kt-btn.kt-btn-success:hover{background-color:color-mix(in oklab,var(--color-green-500) 90%,transparent);}
    .kt-btn.kt-btn-warning:hover{background-color:color-mix(in oklab,var(--color-yellow-500) 90%,transparent);}
    .kt-btn.kt-btn-info:hover{background-color:color-mix(in oklab,var(--color-violet-600) 90%,transparent);}
  }
}

/* ===== OUTLINE (como tus .kt-btn-outline .kt-btn-primary/.destructive) ===== */
.kt-btn.kt-btn-outline.kt-btn-success{
  border:1px solid var(--color-green-500);
  background-color:var(--background);
  color:var(--color-green-500);
}
.kt-btn.kt-btn-outline.kt-btn-success i,
.kt-btn.kt-btn-outline.kt-btn-success svg{color:var(--color-green-500);}
@supports (color: color-mix(in lab, red, red)){
  .kt-btn.kt-btn-outline.kt-btn-success{
    background-color:color-mix(in oklab,var(--color-green-500) 10%,transparent);
    border-color:color-mix(in oklab,var(--color-green-500) 10%,transparent);
  }
}
@media (hover:hover){
  .kt-btn.kt-btn-outline.kt-btn-success:hover{background-color:var(--color-green-500);color:var(--color-white);}
  .kt-btn.kt-btn-outline.kt-btn-success:hover i,
  .kt-btn.kt-btn-outline.kt-btn-success:hover svg{color:var(--color-white);}
}

.kt-btn.kt-btn-outline.kt-btn-warning{
  border:1px solid var(--color-yellow-500);
  background-color:var(--background);
  color:var(--color-yellow-500);
}
.kt-btn.kt-btn-outline.kt-btn-warning i,
.kt-btn.kt-btn-outline.kt-btn-warning svg{color:var(--color-yellow-500);}
@supports (color: color-mix(in lab, red, red)){
  .kt-btn.kt-btn-outline.kt-btn-warning{
    background-color:color-mix(in oklab,var(--color-yellow-500) 10%,transparent);
    border-color:color-mix(in oklab,var(--color-yellow-500) 10%,transparent);
  }
}
@media (hover:hover){
  .kt-btn.kt-btn-outline.kt-btn-warning:hover{background-color:var(--color-yellow-500);color:var(--color-white);}
  .kt-btn.kt-btn-outline.kt-btn-warning:hover i,
  .kt-btn.kt-btn-outline.kt-btn-warning:hover svg{color:var(--color-white);}
}

.kt-btn.kt-btn-outline.kt-btn-info{
  border:1px solid var(--color-violet-600);
  background-color:var(--background);
  color:var(--color-violet-600);
}
.kt-btn.kt-btn-outline.kt-btn-info i,
.kt-btn.kt-btn-outline.kt-btn-info svg{color:var(--color-violet-600);}
@supports (color: color-mix(in lab, red, red)){
  .kt-btn.kt-btn-outline.kt-btn-info{
    background-color:color-mix(in oklab,var(--color-violet-600) 10%,transparent);
    border-color:color-mix(in oklab,var(--color-violet-600) 10%,transparent);
  }
}
@media (hover:hover){
  .kt-btn.kt-btn-outline.kt-btn-info:hover{background-color:var(--color-violet-600);color:var(--color-white);}
  .kt-btn.kt-btn-outline.kt-btn-info:hover i,
  .kt-btn.kt-btn-outline.kt-btn-info:hover svg{color:var(--color-white);}
}

/* ===== OUTLINE para secondary (igual que tenías) ===== */
.kt-btn.kt-btn-outline.kt-btn-secondary{
  border:1px solid var(--secondary);
  background-color:var(--background);
  color:var(--secondary-foreground);
}
@supports (color: color-mix(in lab, red, red)){
  .kt-btn.kt-btn-outline.kt-btn-secondary{
    background-color:color-mix(in oklab,var(--secondary) 10%,transparent);
    border-color:color-mix(in oklab,var(--secondary) 10%,transparent);
  }
}
@media (hover:hover){
  .kt-btn.kt-btn-outline.kt-btn-secondary:hover{
    background-color:var(--secondary);color:var(--foreground);
  }
}

/* ===== FONDO SUAVE + MOVIMIENTO (sin JS) ===== */
@property --x1 { syntax: '<percentage>'; inherits: false; initial-value: 20%; }
@property --y1 { syntax: '<percentage>'; inherits: false; initial-value: 0%;  }
@property --x2 { syntax: '<percentage>'; inherits: false; initial-value: 80%; }
@property --y2 { syntax: '<percentage>'; inherits: false; initial-value: 0%;  }
@property --a1 { syntax: '<number>';     inherits: false; initial-value: .08; }
@property --a2 { syntax: '<number>';     inherits: false; initial-value: .07; }

#miind-fondo-panel{
  position: relative;
  isolation: isolate; /* asegura el stacking sin z-index negativos globales */

  --x1: 20%; --y1: 0%;
  --x2: 80%; --y2: 0%;
  --a1: .08; --a2: .07;
}

#miind-fondo-panel::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;

  background:
    radial-gradient(1200px 400px at var(--x1) var(--y1), rgba(25,81,224,var(--a1)), transparent 60%),
    radial-gradient(900px 300px  at var(--x2) var(--y2), rgba(214,24,163,var(--a2)), transparent 60%);
  animation: miind-bg 24s ease-in-out infinite alternate;
}

@media (prefers-color-scheme: dark){
  #miind-fondo-panel{ --a1: .18; --a2: .16; }
}

@keyframes miind-bg{
  0%   { --x1:20%; --y1:0%;  --x2:80%; --y2:0%;  --a1: var(--a1); --a2: var(--a2); }
  35%  { --x1:26%; --y1:6%;  --x2:74%; --y2:4%;  --a1: calc(var(--a1) + .02); --a2: calc(var(--a2) + .02); }
  70%  { --x1:15%; --y1:3%;  --x2:86%; --y2:2%;  --a1: var(--a1); --a2: calc(var(--a2) + .01); }
  100% { --x1:22%; --y1:-2%; --x2:78%; --y2:-1%; --a1: calc(var(--a1) + .01); --a2: var(--a2); }
}

@media (prefers-reduced-motion: reduce){
  #miind-fondo-panel::before{ animation: none; }
}
