:root{
    /* Colores adicionales funcionales */
  --bs-secondary-alt: #05c3fb; /* secundario */
  --bs-info-alt: #1170e4;      /* info */
  --bs-pink: #d63384;      /* rosa */
  --bs-orange: #fd7e14;    /* naranja/warning */
  --bs-teal: #20c997;
  --bs-danger-alt: #e95858; /* Rojo tipo Red 700 */
  --bs-danger-pastel: #f9dcdc; /* Rojo pastel para variantes más suaves */      /* teal/success alternativo */
  --bs-gray-alt: #343a40;
    /* Subtle / background transparente para dark mode */
  --bs-secondary-alt-bg-subtle: rgba(5, 195, 251, 0.1);
  --bs-info-alt-bg-subtle: rgba(17, 112, 228, 0.1);
  --bs-pink-bg-subtle: rgba(214, 51, 132, 0.1);
  --bs-orange-bg-subtle: rgba(253, 126, 20, 0.1);
  --bs-teal-bg-subtle: rgba(32, 201, 151, 0.1);
  --bs-danger-alt-bg-subtle: rgba(233, 88, 88, 0.1);
  --bs-danger-pastel-bg-subtle: rgba(249, 220, 220, 0.1);
}

[data-bs-theme=dark] {
  --bs-gray-alt: #adb5bd;
  /* Subtle / background transparente para dark mode */
  --bs-secondary-alt-bg-subtle: rgba(5, 195, 251, 0.1);
  --bs-info-alt-bg-subtle: rgba(17, 112, 228, 0.1);
  --bs-pink-bg-subtle: rgba(214, 51, 132, 0.1);
  --bs-orange-bg-subtle: rgba(253, 126, 20, 0.1);
  --bs-teal-bg-subtle: rgba(32, 201, 151, 0.1);
  --bs-danger-alt-bg-subtle: rgba(233, 88, 88, 0.1);
  --bs-danger-pastel-bg-subtle: rgba(249, 220, 220, 0.1);
}

.btn-secondary-alt {
  --bs-btn-color: #ffffff;                  /* Texto blanco */
  --bs-btn-bg: var(--bs-secondary-alt);     /* Azul brillante secundario */
  --bs-btn-border-color: var(--bs-secondary-alt);

  --bs-btn-hover-color: #ffffff;            /* Texto en hover sigue blanco */
  --bs-btn-hover-bg: #049bd1;               /* Azul un poco más oscuro al hover */
  --bs-btn-hover-border-color: #038bbd;

  --bs-btn-focus-shadow-rgb: 5, 195, 251;  /* Sombra de foco matching azul */

  --bs-btn-active-color: #ffffff;
  --bs-btn-active-bg: #038bbd;              /* Activo más oscuro */
  --bs-btn-active-border-color: #027aa8;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);

  --bs-btn-disabled-color: #ffffff;
  --bs-btn-disabled-bg: var(--bs-secondary-alt); /* Mantiene azul cuando deshabilitado */
  --bs-btn-disabled-border-color: var(--bs-secondary-alt);
}

.btn-info-alt {
  --bs-btn-color: #ffffff;                  /* Texto blanco */
  --bs-btn-bg: var(--bs-info-alt);          /* Azul info-alternativo */
  --bs-btn-border-color: var(--bs-info-alt);

  --bs-btn-hover-color: #ffffff;            /* Texto en hover sigue blanco */
  --bs-btn-hover-bg: #0e5fc1;               /* Azul un poco más oscuro al hover */
  --bs-btn-hover-border-color: #0c53a8;

  --bs-btn-focus-shadow-rgb: 17, 112, 228; /* Sombra de foco matching azul */

  --bs-btn-active-color: #ffffff;
  --bs-btn-active-bg: #0c53a8;             /* Activo más oscuro */
  --bs-btn-active-border-color: #0a4890;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);

  --bs-btn-disabled-color: #ffffff;
  --bs-btn-disabled-bg: var(--bs-info-alt); /* Mantiene azul cuando deshabilitado */
  --bs-btn-disabled-border-color: var(--bs-info-alt);
}

.btn-orange {
  --bs-btn-color: #ffffff;                  /* Texto blanco */
  --bs-btn-bg: var(--bs-orange);            /* Naranja principal */
  --bs-btn-border-color: var(--bs-orange);

  --bs-btn-hover-color: #ffffff;            /* Texto en hover sigue blanco */
  --bs-btn-hover-bg: #e06d0f;               /* Naranja un poco más oscuro al hover */
  --bs-btn-hover-border-color: #ca620e;

  --bs-btn-focus-shadow-rgb: 253, 126, 20; /* Sombra de foco matching naranja */

  --bs-btn-active-color: #ffffff;
  --bs-btn-active-bg: #ca620e;             /* Activo más oscuro */
  --bs-btn-active-border-color: #b3580d;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);

  --bs-btn-disabled-color: #ffffff;
  --bs-btn-disabled-bg: var(--bs-orange);   /* Mantiene naranja cuando deshabilitado */
  --bs-btn-disabled-border-color: var(--bs-orange);
}

.btn-pink {
  --bs-btn-color: #ffffff;                /* texto blanco */
  --bs-btn-bg: var(--bs-pink);                   /* rosa principal */
  --bs-btn-border-color: var(--bs-pink);         /* borde rosa */

  --bs-btn-hover-color: #ffffff;          /* texto en hover sigue blanco */
  --bs-btn-hover-bg: #c32c76;             /* rosa un poco más oscuro al hover */
  --bs-btn-hover-border-color: #b0266b;   /* borde más oscuro al hover */

  --bs-btn-focus-shadow-rgb: 211, 51, 132; /* sombra de foco, matching rosa */

  --bs-btn-active-color: #ffffff;
  --bs-btn-active-bg: #b0266b;            /* activo más oscuro */
  --bs-btn-active-border-color: #9e205f;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);

  --bs-btn-disabled-color: #ffffff;
  --bs-btn-disabled-bg: #d63384;          /* deshabilitado mantiene rosa */
  --bs-btn-disabled-border-color: #d63384;
}

.btn-teal {
  --bs-btn-color: #ffffff;                  /* Texto blanco */
  --bs-btn-bg: var(--bs-teal);              /* Teal principal */
  --bs-btn-border-color: var(--bs-teal);

  --bs-btn-hover-color: #ffffff;            /* Texto en hover sigue blanco */
  --bs-btn-hover-bg: #1aa885;               /* Teal un poco más oscuro al hover */
  --bs-btn-hover-border-color: #178f75;

  --bs-btn-focus-shadow-rgb: 32, 201, 151; /* Sombra de foco matching teal */

  --bs-btn-active-color: #ffffff;
  --bs-btn-active-bg: #178f75;             /* Activo más oscuro */
  --bs-btn-active-border-color: #147963;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);

  --bs-btn-disabled-color: #ffffff;
  --bs-btn-disabled-bg: var(--bs-teal);    /* Mantiene teal cuando deshabilitado */
  --bs-btn-disabled-border-color: var(--bs-teal);
}

.btn-danger-alt {
  --bs-btn-color: #ffffff;                 /* Texto blanco */
  --bs-btn-bg: var(--bs-danger-alt);       /* Rojo intenso */
  --bs-btn-border-color: var(--bs-danger-alt);

  --bs-btn-hover-color: #ffffff;           /* Texto en hover sigue blanco */
  --bs-btn-hover-bg: #b82a2a;              /* Rojo un poco más oscuro al hover */
  --bs-btn-hover-border-color: #a12424;

  --bs-btn-focus-shadow-rgb: 211, 47, 47; /* Sombra de foco matching rojo */

  --bs-btn-active-color: #ffffff;
  --bs-btn-active-bg: #a12424;            /* Activo más oscuro */
  --bs-btn-active-border-color: #8f1f1f;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0,0,0,0.125);

  --bs-btn-disabled-color: #ffffff;
  --bs-btn-disabled-bg: var(--bs-danger-alt);  /* Mantiene rojo cuando deshabilitado */
  --bs-btn-disabled-border-color: var(--bs-danger-alt);
}

.btn.btn-subtle-secondary-alt {
  background-color: var(--bs-secondary-alt-bg-subtle, #e0f5ff); /* fondo suave azul */
  border-color: var(--bs-secondary-alt-bg-subtle, #e0f5ff);
  color: var(--bs-secondary-alt); /* texto azul brillante */
}

.btn.btn-subtle-secondary-alt:hover,
.btn.btn-subtle-secondary-alt:active,
.btn.btn-subtle-secondary-alt:focus {
  border-color: var(--bs-secondary-alt);
  background-color: var(--bs-secondary-alt);
  color: #ffffff;
}

/* INFO-ALT */
.btn.btn-subtle-info-alt {
  background-color: var(--bs-info-alt-bg-subtle, #dbe6fb);
  border-color: var(--bs-info-alt-bg-subtle, #dbe6fb);
  color: var(--bs-info-alt);
}
.btn.btn-subtle-info-alt:hover,
.btn.btn-subtle-info-alt:active,
.btn.btn-subtle-info-alt:focus {
  background-color: var(--bs-info-alt);
  border-color: var(--bs-info-alt);
  color: #ffffff;
}

/* PINK */
.btn.btn-subtle-pink {
  background-color: var(--bs-pink-bg-subtle, #f8d1e0);
  border-color: var(--bs-pink-bg-subtle, #f8d1e0);
  color: var(--bs-pink);
}
.btn.btn-subtle-pink:hover,
.btn.btn-subtle-pink:active,
.btn.btn-subtle-pink:focus {
  background-color: var(--bs-pink);
  border-color: var(--bs-pink);
  color: #ffffff;
}

/* ORANGE */
.btn.btn-subtle-orange {
  background-color: var(--bs-orange-bg-subtle, #fff2e0);
  border-color: var(--bs-orange-bg-subtle, #fff2e0);
  color: var(--bs-orange);
}
.btn.btn-subtle-orange:hover,
.btn.btn-subtle-orange:active,
.btn.btn-subtle-orange:focus {
  background-color: var(--bs-orange);
  border-color: var(--bs-orange);
  color: #ffffff;
}

/* TEAL */
.btn.btn-subtle-teal {
  background-color: var(--bs-teal-bg-subtle, #d4f2ea);
  border-color: var(--bs-teal-bg-subtle, #d4f2ea);
  color: var(--bs-teal);
}
.btn.btn-subtle-teal:hover,
.btn.btn-subtle-teal:active,
.btn.btn-subtle-teal:focus {
  background-color: var(--bs-teal);
  border-color: var(--bs-teal);
  color: #ffffff;
}

/* DANGER-ALT */
.btn.btn-subtle-danger-alt {
  background-color: var(--bs-danger-alt-bg-subtle, #fbdede);
  border-color: var(--bs-danger-alt-bg-subtle, #fbdede);
  color: var(--bs-danger-alt);
}
.btn.btn-subtle-danger-alt:hover,
.btn.btn-subtle-danger-alt:active,
.btn.btn-subtle-danger-alt:focus {
  background-color: var(--bs-danger-alt);
  border-color: var(--bs-danger-alt);
  color: #ffffff;
}

/* DANGER-PASTEL */
.btn.btn-subtle-danger-pastel {
  background-color: var(--bs-danger-pastel-bg-subtle, #fde7e7);
  border-color: var(--bs-danger-pastel-bg-subtle, #fde7e7);
  color: var(--bs-danger-pastel);
}
.btn.btn-subtle-danger-pastel:hover,
.btn.btn-subtle-danger-pastel:active,
.btn.btn-subtle-danger-pastel:focus {
  background-color: var(--bs-danger-pastel);
  border-color: var(--bs-danger-pastel);
  color: #000000;
}

.btn-outline-secondary-alt {
  --bs-btn-color: var(--bs-secondary-alt);        /* texto azul brillante */
  --bs-btn-border-color: var(--bs-secondary-alt);
  --bs-btn-hover-color: #ffffff;
  --bs-btn-hover-bg: var(--bs-secondary-alt);
  --bs-btn-hover-border-color: var(--bs-secondary-alt);
  --bs-btn-focus-shadow-rgb: 5,195,251;
  --bs-btn-active-color: #ffffff;
  --bs-btn-active-bg: var(--bs-secondary-alt);
  --bs-btn-active-border-color: var(--bs-secondary-alt);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0,0,0,0.125);
  --bs-btn-disabled-color: var(--bs-secondary-alt);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--bs-secondary-alt);
  --bs-gradient: none;
}

/* OUTLINE INFO-ALT */
.btn-outline-info-alt {
  --bs-btn-color: var(--bs-info-alt);
  --bs-btn-border-color: var(--bs-info-alt);
  --bs-btn-hover-color: #ffffff;
  --bs-btn-hover-bg: var(--bs-info-alt);
  --bs-btn-hover-border-color: var(--bs-info-alt);
  --bs-btn-focus-shadow-rgb: 17,112,228;
  --bs-btn-active-color: #ffffff;
  --bs-btn-active-bg: var(--bs-info-alt);
  --bs-btn-active-border-color: var(--bs-info-alt);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0,0,0,0.125);
  --bs-btn-disabled-color: var(--bs-info-alt);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--bs-info-alt);
  --bs-gradient: none;
}

/* OUTLINE PINK */
.btn-outline-pink {
  --bs-btn-color: var(--bs-pink);
  --bs-btn-border-color: var(--bs-pink);
  --bs-btn-hover-color: #ffffff;
  --bs-btn-hover-bg: var(--bs-pink);
  --bs-btn-hover-border-color: var(--bs-pink);
  --bs-btn-focus-shadow-rgb: 214,51,132;
  --bs-btn-active-color: #ffffff;
  --bs-btn-active-bg: var(--bs-pink);
  --bs-btn-active-border-color: var(--bs-pink);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0,0,0,0.125);
  --bs-btn-disabled-color: var(--bs-pink);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--bs-pink);
  --bs-gradient: none;
}

/* OUTLINE ORANGE */
.btn-outline-orange {
  --bs-btn-color: var(--bs-orange);
  --bs-btn-border-color: var(--bs-orange);
  --bs-btn-hover-color: #ffffff;
  --bs-btn-hover-bg: var(--bs-orange);
  --bs-btn-hover-border-color: var(--bs-orange);
  --bs-btn-focus-shadow-rgb: 253,126,20;
  --bs-btn-active-color: #ffffff;
  --bs-btn-active-bg: var(--bs-orange);
  --bs-btn-active-border-color: var(--bs-orange);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0,0,0,0.125);
  --bs-btn-disabled-color: var(--bs-orange);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--bs-orange);
  --bs-gradient: none;
}

/* OUTLINE TEAL */
.btn-outline-teal {
  --bs-btn-color: var(--bs-teal);
  --bs-btn-border-color: var(--bs-teal);
  --bs-btn-hover-color: #ffffff;
  --bs-btn-hover-bg: var(--bs-teal);
  --bs-btn-hover-border-color: var(--bs-teal);
  --bs-btn-focus-shadow-rgb: 32,201,151;
  --bs-btn-active-color: #ffffff;
  --bs-btn-active-bg: var(--bs-teal);
  --bs-btn-active-border-color: var(--bs-teal);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0,0,0,0.125);
  --bs-btn-disabled-color: var(--bs-teal);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--bs-teal);
  --bs-gradient: none;
}

/* OUTLINE DANGER-ALT */
.btn-outline-danger-alt {
  --bs-btn-color: var(--bs-danger-alt);
  --bs-btn-border-color: var(--bs-danger-alt);
  --bs-btn-hover-color: #ffffff;
  --bs-btn-hover-bg: var(--bs-danger-alt);
  --bs-btn-hover-border-color: var(--bs-danger-alt);
  --bs-btn-focus-shadow-rgb: 233,88,88;
  --bs-btn-active-color: #ffffff;
  --bs-btn-active-bg: var(--bs-danger-alt);
  --bs-btn-active-border-color: var(--bs-danger-alt);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0,0,0,0.125);
  --bs-btn-disabled-color: var(--bs-danger-alt);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--bs-danger-alt);
  --bs-gradient: none;
}


/* BADGES SÓLIDOS FUNCIONALES */

/* SECONDARY-ALT */
.bg-secondary-alt {
  background-color: var(--bs-secondary-alt) !important;
  color: #ffffff !important;
}

/* INFO-ALT */
.bg-info-alt {
  background-color: var(--bs-info-alt) !important;
  color: #ffffff !important;
}

/* PINK */
.bg-pink {
  background-color: var(--bs-pink) !important;
  color: #ffffff !important;
}

/* ORANGE */
.bg-orange {
  background-color: var(--bs-orange) !important;
  color: #ffffff !important;
}

/* TEAL */
.bg-teal {
  background-color: var(--bs-teal) !important;
  color: #ffffff !important;
}

/* DANGER-ALT */
.bg-danger-alt {
  background-color: var(--bs-danger-alt) !important;
  color: #ffffff !important;
}

/* DANGER-PASTEL (fondo claro, texto negro) */
.bg-danger-pastel {
  background-color: var(--bs-danger-pastel) !important;
  color: var(--bs-pink) !important;
}

/* BADGES FUNCIONALES */

/* SECONDARY-ALT */
.bg-secondary-alt-subtle {
  background-color: var(--bs-secondary-alt-bg-subtle) !important;
  color: var(--bs-secondary-alt) !important;
}

/* INFO-ALT */
.bg-info-alt-subtle {
  background-color: var(--bs-info-alt-bg-subtle) !important;
  color: var(--bs-info-alt) !important;
}

/* PINK */
.bg-pink-subtle {
  background-color: var(--bs-pink-bg-subtle) !important;
  color: var(--bs-pink) !important;
}

/* ORANGE */
.bg-orange-subtle {
  background-color: var(--bs-orange-bg-subtle) !important;
  color: var(--bs-orange) !important;
}

/* TEAL */
.bg-teal-subtle {
  background-color: var(--bs-teal-bg-subtle) !important;
  color: var(--bs-teal) !important;
}

/* DANGER-ALT */
.bg-danger-alt-subtle {
  background-color: var(--bs-danger-alt-bg-subtle) !important;
  color: var(--bs-danger-alt) !important;
}

/* DANGER-PASTEL */
.bg-danger-pastel-subtle {
  background-color: var(--bs-danger-pastel-bg-subtle) !important;
  color: var(--bs-danger-pastel) !important;
}

/* --- Estilos para SweetAlert2 Adaptables --- */

/* 1. Definición de variables para Modo Oscuro */
[data-bs-theme='dark'] {
  --swal-bg: #212529;       /* Fondo oscuro (ej. Bootstrap dark) */
  --swal-color: #f8f9fa;    /* Texto claro */
}

/* 2. Aplicación básica al popup */
[data-bs-theme='dark'] .swal2-popup {
  background-color: var(--swal-bg) !important;
  color: var(--swal-color) !important;
}

[data-bs-theme='dark'] .swal2-title,
[data-bs-theme='dark'] .swal2-html-container {
  color: var(--swal-color) !important;
}


/* =========================================================
   COLOR TEXTO PERSONALIZADO 
   ========================================================= */

/* Colores personalizados para texto */
.text-secondary-alt {
  color: #05c3fb !important;
  /* secundario */
}

.text-info-alt {
  color: #1170e4 !important;
  /* info */
}

.text-pink {
  color: #d63384 !important;
  /* rosa */
}

.text-orange {
  color: #fd7e14 !important;
  /* naranja / warning */
}

.text-teal {
  color: #20c997 !important;
  /* teal */
}

.text-danger-alt {
  color: #e95858 !important;
  /* rojo tipo Red 700 */
}

/* =========================================================
   CABECERA DEL MODAL CUSTOM
   ========================================================= */

.modal-header-custom {
          border-top-left-radius: var(--bs-border-radius-lg);
          border-top-right-radius: var(--bs-border-radius-lg);

          background-color: var(--bs-secondary-bg);
          border-bottom: 1px solid var(--bs-border-color);

          padding: 14px 20px;
        }

        /* Icono discreto */
        .modal-icon {
          width: 28px;
          height: 28px;
          display: flex;
          align-items: center;
          justify-content: center;

          border-radius: 6px;

          background-color: rgba(var(--bs-primary-rgb), 0.09);
          color: var(--bs-primary);

          font-size: 16px;
        }

        /* =========================
   ICONO MODAL (DARK)
========================= */
[data-bs-theme="dark"] .modal-icon {
  background-color: rgba(var(--bs-primary-rgb), 0.18);
  color: var(--bs-gray-500);
}

        /* Título */
        .modal-title {
          font-size: 0.95rem;
          font-weight: 600;
          color: var(--bs-heading-color);
        }

/* =========================================================
   SOLUCIÓN AL PROBLEMA DE LOS PARCHES BLANCOS EN EL ICONO
   ========================================================= */

/* Forzamos a que los elementos de animación del icono de SUCCESS
   usen el mismo color de fondo que nuestro tema oscuro,
   sobrescribiendo sus estilos en línea. */

[data-bs-theme='dark'] .swal2-icon.swal2-success .swal2-success-circular-line-left,
[data-bs-theme='dark'] .swal2-icon.swal2-success .swal2-success-circular-line-right,
[data-bs-theme='dark'] .swal2-icon.swal2-success .swal2-success-fix {
  background-color: var(--swal-bg) !important;
}



/* =========================================================
SELECT DATATABLE
========================================================= */

/* SELECTED (ultra sutil, gris elegante) */
table.table.dataTable > tbody > tr.selected > * {
  box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, 0.04);
  color: inherit !important;
}

/* HOVER normal */
table.table.dataTable.table-hover > tbody > tr:hover > * {
  box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, 0.025);
}

/* SELECTED + HOVER */
table.table.dataTable.table-hover > tbody > tr.selected:hover > * {
  box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, 0.07);
}

[data-bs-theme=dark] table.table.dataTable > tbody > tr.selected > * {
  box-shadow: inset 0 0 0 9999px rgba(255, 255, 255, 0.05);
}

[data-bs-theme=dark] table.table.dataTable.table-hover > tbody > tr:hover > * {
  box-shadow: inset 0 0 0 9999px rgba(255, 255, 255, 0.03);
}

[data-bs-theme=dark] table.table.dataTable.table-hover > tbody > tr.selected:hover > * {
  box-shadow: inset 0 0 0 9999px rgba(255, 255, 255, 0.08);
}

/* =========================================================
ALERTAS LOGIN
========================================================= */

#alertContainer .alert {
    animation: fadeInDown 0.4s ease-out;
}

@keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}



.avatar-badges {
  position: absolute;
  top: 0;          /* pegado arriba */
  right: 0;        /* pegado a la derecha */

  transform: translate(35%, -35%); /* 👈 lo saca ligeramente sin “volarlo” */
  
  min-width: 18px;
  height: 18px;
  padding: 0 4px;

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

  font-size: 10px;
  line-height: 1;
}

/*=============================================
TARJETAS DE USUARIO (MOBILE & GRID)
=============================================*/

.contact-action {
    position: relative;
    overflow: visible; /* Permitir que los dropdowns salgan de la tarjeta */
}

/* 🔹 OVERLAY VISUAL
   El secreto: pointer-events: none para que sea invisible al tacto */
.contact-action .contact-overlay {
    position: absolute;
    inset: 0;
    background-color: rgba(var(--bs-primary-rgb), 0.15); /* Un tono más sutil */
    border-radius: 7px;
    opacity: 0;
    transition: opacity .2s ease;
    z-index: 1;
    pointer-events: none; /* 🔥 Crucial: El mouse "atraviesa" esta capa */
}

.contact-action:hover .contact-overlay {
    opacity: 1;
}

/* 🔹 CONTENEDOR DE ACCIONES
   Elevamos el z-index para que esté sobre el overlay visual */
.contact-action .contact-hover-buttons {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    pointer-events: none; /* Los botones hijos activarán sus propios eventos */
}

/* 🔹 BOTONES Y DROPDOWNS DENTRO DE LA TARJETA */
.contact-action .contact-hover-btn,
.contact-action .contact-hover-dropdown {
    opacity: 0;
    transition: all .2s ease;
    pointer-events: auto; /* 🔥 Activamos el tacto solo para los botones reales */
}

.contact-action:hover .contact-hover-btn,
.contact-action:hover .contact-hover-dropdown {
    opacity: 1;
}

/* 🔹 TRATAMIENTO ESPECÍFICO PARA EL DROPDOWN
   Evitamos que colisione con el scroll o capas inferiores */
.contact-hover-dropdown .dropdown-menu {
    z-index: 1060 !important; /* Valor estándar de Bootstrap para popovers */
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(0, 0, 0, 0.05);
}

/* 🔹 CORRECCIÓN DE ICONOS
   A veces el clic cae en el icono <i> y no en el <a>. Esto lo arregla. */
.dropdown-item i {
    pointer-events: none;
}

/* 🔹 EFECTO DE ELEVACIÓN
   Al abrir el menú, la tarjeta debe ganar prioridad total */
.contact-action:focus-within,
.contact-action:has(.show) {
    z-index: 10;
}

/* Estilo para el texto de eliminar para que sea legible */
.text-danger.dropdown-item:hover {
    background-color: rgba(var(--bs-danger-rgb), 0.1);
    color: var(--bs-danger) !important;
}

/* Reducción de escala para máxima densidad */
.btn-dense {
    --bs-btn-padding-y: 0.25rem;       /* Reducido a la mitad (4px) */
    --bs-btn-padding-x: 0.6rem;        /* Un poco más estrecho */
    --bs-btn-font-size: 0.75rem;       /* 12px: El estándar de ClickUp/Monday */
    --bs-btn-border-radius: 4px;       /* Bordes más afilados dan sensación de precisión */
}

/* El buscador también debe bajar de peso */
.form-control-dense {
    height: 31px;                      /* Altura fija para alinear con botones */
    font-size: 0.8rem;
}

/* Colores por defecto */
:root {
  --etiqueta-bg: #ffffff;
  --etiqueta-color: #6c757d;
  --etiqueta-border: #e9ecef;

  --etiqueta-hover-bg: var(--bs-gray-300);
  --etiqueta-hover-color: #8e44ad;
  --etiqueta-hover-border: var(--bs-gray-500);
}

/* Dark mode */
[data-bs-theme="dark"] {
  --etiqueta-bg: #2c2c2c;
  --etiqueta-color: #ccc;
  --etiqueta-border: #555;
  --etiqueta-hover-bg: #3a3a3a;
  --etiqueta-hover-color: #8e44ad;
  --etiqueta-hover-border: #666;
}

/* Botón sm estilo etiqueta */
.etiqueta {
  min-height: 35px;
  min-width: 120px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  position: relative;
  cursor: pointer;
  background: var(--etiqueta-bg);
  color: var(--etiqueta-color);
  border: 2px solid var(--etiqueta-border);
  font-size: 14px;
  font-weight: 600;
  border-radius: 7px;
  transition: all 0.15s ease;
}

.etiqueta:before {
  content: "";
  width: 3px;
  height: 18px;
  background: #19173b;
  border: 2px solid var(--etiqueta-border);
  transform: rotate(-45deg);
  position: absolute;
  bottom: -5px;
  left: 3px;
  border-bottom-left-radius: 8px;
  border-top-left-radius: 8px;
}

.etiqueta:after {
  content: "";
  position: absolute;
  left: -2px;
  bottom: -2px;
  border-top: 10px solid transparent;
  border-left: 10px solid #fffcf7;
}

/* Hover */
.etiqueta:hover {
  background: var(--etiqueta-hover-bg);
  color: var(--etiqueta-hover-color);
  border-color: var(--etiqueta-hover-border);
}

/* Click/active */
.etiqueta:active {
  transform: scale(0.95);
  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

/* Variante morada */
.etiqueta-rosa {
  --etiqueta-color: #e2b7f5;
  --etiqueta-hover-color: #8e44ad;
  --etiqueta-bg: #ffffff;
  --etiqueta-hover-bg: var(--bs-gray-300);
  --etiqueta-border: #e9ecef;
  --etiqueta-hover-border: var(--bs-gray-500);
}

/* Variante verde */
.etiqueta-green {
  --etiqueta-color: #155724;
  --etiqueta-hover-color: #28a745;
  --etiqueta-bg: #d4edda;
  --etiqueta-hover-bg: #c3e6cb;
  --etiqueta-border: #c3e6cb;
  --etiqueta-hover-border: #28a745;
}

/* Variante roja */
.etiqueta-red {
  --etiqueta-color: #721c24;
  --etiqueta-hover-color: #dc3545;
  --etiqueta-bg: #f8d7da;
  --etiqueta-hover-bg: #f5c6cb;
  --etiqueta-border: #f5c6cb;
  --etiqueta-hover-border: #dc3545;
}

/*https://uiverse.io/csozidev/moody-rabbit-99*/

.view-toggle {
  display: inline-block;
  position: relative;
  user-select: none;
}

.view-toggle input {
  display: none; /* Ocultamos el checkbox real */
}

.view-toggle label {
  display: flex;
  align-items: center;
  position: relative;
  width: 80px;
  height: 36px;
  background: #e9ecef;
  border-radius: 20px;
  padding: 0 5px;
  cursor: pointer;
}

.view-toggle label .icon {
  font-size: 18px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6c757d;
  z-index: 2;
  transition: color 0.2s ease;
}

.view-toggle label .slider {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 32px;
  height: 32px;
  background: #ffffff;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  transition: transform 0.25s ease;
}

/* Cuando el toggle está activo */
.view-toggle input:checked + label .slider {
  transform: translateX(44px); /* Mover al lado de la cuadricula */
}

/* Cambiar color de iconos según el toggle */
.view-toggle input:not(:checked) + label .icon.list {
  color: #8e44ad; /* activo en lista */
}
.view-toggle input:checked + label .icon.grid {
  color: #8e44ad; /* activo en grid */
}

.view-toggle-rect {
  display: inline-block;
  position: relative;
  user-select: none;
}

.view-toggle-rect input {
  display: none; /* ocultamos el checkbox */
}

.view-toggle-rect label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  width: 100px;      /* ancho total del toggle */
  height: 36px;
  background: #e9ecef;
  border-radius: 10px;
  padding: 0;
  cursor: pointer;
}

.view-toggle-rect label .icon {
  flex: 1; /* ocupar el mismo espacio cada icono */
  text-align: center;
  z-index: 2;
  font-size: 18px;
  color: #6c757d;
  transition: color 0.25s ease;
}

/* Slider ocupa exactamente la mitad del toggle */
.view-toggle-rect label .slider {
  position: absolute;
  top: 2px;
  left: 2px;
  width: calc(50% - 4px); /* la mitad menos padding */
  height: 32px;
  background: #ffffff;
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  transition: transform 0.25s ease;
}

/* Mover slider al activar checkbox */
.view-toggle-rect input:checked + label .slider {
  transform: translateX(50px); /* mueve exactamente la mitad del ancho */
}

/* Iconos activos */
.view-toggle-rect input:not(:checked) + label .icon.list {
  color: #8e44ad;
}
.view-toggle-rect input:checked + label .icon.grid {
  color: #8e44ad;
}