/* =====================================================
   Digit Soft - SISTEMA DE BOTONES MODERNOS
   Versión: 2.0 | Diseño Premium Profesional
   ===================================================== */

/* ──────────────────────────────────────────────────────
   VARIABLES DE BOTONES
────────────────────────────────────────────────────── */
:root {
    --btn-radius:        10px;
    --btn-radius-pill:   50px;
    --btn-radius-sm:     8px;
    --btn-transition:    all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    --btn-shadow:        0 4px 14px rgba(0,0,0,0.15);
    --btn-shadow-hover:  0 8px 24px rgba(0,0,0,0.22);
    --btn-shadow-active: 0 2px 6px rgba(0,0,0,0.18);

    /* Colores primarios */
    --btn-primary-from:  #1e3c72;
    --btn-primary-to:    #00b4d8;
    --btn-success-from:  #1a8a3e;
    --btn-success-to:    #20c997;
    --btn-danger-from:   #c0392b;
    --btn-danger-to:     #e74c3c;
    --btn-warning-from:  #d4870a;
    --btn-warning-to:    #f5a623;
    --btn-info-from:     #0277bd;
    --btn-info-to:       #29b6f6;
    --btn-dark-from:     #1a1a2e;
    --btn-dark-to:       #2c3e50;
    --btn-purple-from:   #6a0dad;
    --btn-purple-to:     #9c27b0;
    --btn-teal-from:     #00695c;
    --btn-teal-to:       #00bcd4;
    --btn-orange-from:   #e65100;
    --btn-orange-to:     #ff9800;
}

/* ──────────────────────────────────────────────────────
   BASE PARA TODOS LOS BOTONES DS (Digit Soft)
────────────────────────────────────────────────────── */
.ds-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 22px;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.3px;
    border: none;
    border-radius: var(--btn-radius);
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    position: relative;
    overflow: hidden;
    transition: var(--btn-transition);
    box-shadow: var(--btn-shadow);
    -webkit-user-select: none;
    user-select: none;
    line-height: 1;
    vertical-align: middle;
}

/* Efecto ripple al hacer clic */
.ds-btn::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.15);
    opacity: 0;
    transition: opacity 0.2s ease;
    border-radius: inherit;
}
.ds-btn:hover::after  { opacity: 1; }
.ds-btn:active::after { opacity: 0; }

.ds-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--btn-shadow-hover);
    text-decoration: none;
    color: inherit;
}
.ds-btn:active {
    transform: translateY(0) scale(0.97);
    box-shadow: var(--btn-shadow-active);
}
.ds-btn:focus-visible {
    outline: 3px solid rgba(255,255,255,0.6);
    outline-offset: 3px;
}
.ds-btn:disabled,
.ds-btn.disabled {
    opacity: 0.55;
    pointer-events: none;
    transform: none;
    box-shadow: none;
}
.ds-btn i,
.ds-btn svg {
    font-size: 0.95em;
    flex-shrink: 0;
}

/* ──────────────────────────────────────────────────────
   TAMAÑOS
────────────────────────────────────────────────────── */
.ds-btn-xs  { padding: 5px 12px;  font-size: 0.75rem; border-radius: var(--btn-radius-sm); }
.ds-btn-sm  { padding: 7px 16px;  font-size: 0.8rem;  border-radius: var(--btn-radius-sm); }
.ds-btn-md  { padding: 10px 22px; font-size: 0.875rem; }
.ds-btn-lg  { padding: 13px 30px; font-size: 1rem;    }
.ds-btn-xl  { padding: 16px 38px; font-size: 1.1rem;  border-radius: 12px; }

/* Pill (redondeado completo) */
.ds-btn-pill { border-radius: var(--btn-radius-pill) !important; }

/* Bloque completo */
.ds-btn-block { width: 100%; }

/* Solo icono */
.ds-btn-icon {
    padding: 0 !important;
    width: 38px;
    height: 38px;
    border-radius: var(--btn-radius-sm) !important;
    gap: 0;
}
.ds-btn-icon.ds-btn-sm { width: 30px; height: 30px; }
.ds-btn-icon.ds-btn-lg { width: 46px; height: 46px; }

/* ──────────────────────────────────────────────────────
   VARIANTES DE COLOR - GRADIENTES
────────────────────────────────────────────────────── */

/* PRIMARY — Azul corporativo */
.ds-btn-primary {
    background: linear-gradient(135deg, var(--btn-primary-from) 0%, #2a5298 50%, var(--btn-primary-to) 100%);
    color: #fff;
}
.ds-btn-primary:hover { color: #fff; box-shadow: 0 8px 24px rgba(0,180,216,0.35); }

/* SUCCESS — Verde */
.ds-btn-success {
    background: linear-gradient(135deg, var(--btn-success-from), var(--btn-success-to));
    color: #fff;
}
.ds-btn-success:hover { color: #fff; box-shadow: 0 8px 24px rgba(32,201,151,0.35); }

/* DANGER — Rojo */
.ds-btn-danger {
    background: linear-gradient(135deg, var(--btn-danger-from), var(--btn-danger-to));
    color: #fff;
}
.ds-btn-danger:hover { color: #fff; box-shadow: 0 8px 24px rgba(231,76,60,0.35); }

/* WARNING — Naranja/Amarillo */
.ds-btn-warning {
    background: linear-gradient(135deg, var(--btn-warning-from), var(--btn-warning-to));
    color: #fff;
}
.ds-btn-warning:hover { color: #fff; box-shadow: 0 8px 24px rgba(245,166,35,0.35); }

/* INFO — Azul claro */
.ds-btn-info {
    background: linear-gradient(135deg, var(--btn-info-from), var(--btn-info-to));
    color: #fff;
}
.ds-btn-info:hover { color: #fff; box-shadow: 0 8px 24px rgba(41,182,246,0.35); }

/* DARK */
.ds-btn-dark {
    background: linear-gradient(135deg, var(--btn-dark-from), var(--btn-dark-to));
    color: #fff;
}
.ds-btn-dark:hover { color: #fff; box-shadow: 0 8px 24px rgba(44,62,80,0.40); }

/* PURPLE — Morado (IA / SOFIA) */
.ds-btn-purple {
    background: linear-gradient(135deg, var(--btn-purple-from), var(--btn-purple-to));
    color: #fff;
}
.ds-btn-purple:hover { color: #fff; box-shadow: 0 8px 24px rgba(156,39,176,0.35); }

/* TEAL */
.ds-btn-teal {
    background: linear-gradient(135deg, var(--btn-teal-from), var(--btn-teal-to));
    color: #fff;
}
.ds-btn-teal:hover { color: #fff; box-shadow: 0 8px 24px rgba(0,188,212,0.35); }

/* ORANGE */
.ds-btn-orange {
    background: linear-gradient(135deg, var(--btn-orange-from), var(--btn-orange-to));
    color: #fff;
}
.ds-btn-orange:hover { color: #fff; box-shadow: 0 8px 24px rgba(255,152,0,0.35); }

/* LIGHT */
.ds-btn-light {
    background: linear-gradient(135deg, #f8f9fa, #e9ecef);
    color: #1e3c72;
    box-shadow: 0 3px 10px rgba(0,0,0,0.10);
}
.ds-btn-light:hover { color: #1e3c72; box-shadow: 0 6px 18px rgba(0,0,0,0.14); }

/* WHITE */
.ds-btn-white {
    background: #ffffff;
    color: #1e3c72;
    box-shadow: 0 3px 12px rgba(0,0,0,0.12);
}
.ds-btn-white:hover { color: #1e3c72; background: #f5f8ff; box-shadow: 0 6px 20px rgba(0,0,0,0.16); }

/* ──────────────────────────────────────────────────────
   VARIANTES OUTLINE
────────────────────────────────────────────────────── */
.ds-btn-outline {
    background: transparent !important;
    border: 2px solid currentColor;
    box-shadow: none;
}
.ds-btn-outline:hover {
    box-shadow: 0 4px 14px rgba(0,0,0,0.12);
}

.ds-btn-outline-primary { color: #2a5298; border-color: #2a5298; }
.ds-btn-outline-primary:hover { background: linear-gradient(135deg, #1e3c72, #2a5298) !important; color: #fff; }

.ds-btn-outline-success { color: #1a8a3e; border-color: #1a8a3e; }
.ds-btn-outline-success:hover { background: linear-gradient(135deg, #1a8a3e, #20c997) !important; color: #fff; }

.ds-btn-outline-danger { color: #c0392b; border-color: #c0392b; }
.ds-btn-outline-danger:hover { background: linear-gradient(135deg, #c0392b, #e74c3c) !important; color: #fff; }

.ds-btn-outline-warning { color: #d4870a; border-color: #d4870a; }
.ds-btn-outline-warning:hover { background: linear-gradient(135deg, #d4870a, #f5a623) !important; color: #fff; }

.ds-btn-outline-info { color: #0277bd; border-color: #0277bd; }
.ds-btn-outline-info:hover { background: linear-gradient(135deg, #0277bd, #29b6f6) !important; color: #fff; }

.ds-btn-outline-dark { color: #2c3e50; border-color: #2c3e50; }
.ds-btn-outline-dark:hover { background: linear-gradient(135deg, #1a1a2e, #2c3e50) !important; color: #fff; }

/* ──────────────────────────────────────────────────────
   BOTONES DE ACCIÓN EN TABLAS (ver / editar / eliminar)
────────────────────────────────────────────────────── */
.btn-tabla {
    width: 34px;
    height: 34px;
    min-width: 34px;
    padding: 0;
    border: none;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.82rem;
    text-decoration: none;
    transition: var(--btn-transition);
    cursor: pointer;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}
.btn-tabla:hover {
    transform: translateY(-2px) scale(1.12);
    box-shadow: 0 5px 14px rgba(0,0,0,0.20);
    text-decoration: none;
}
.btn-tabla:active { transform: scale(0.95); }

.btn-tabla-ver      { background: linear-gradient(135deg, #0277bd, #29b6f6); color: #fff; }
.btn-tabla-ver:hover { color: #fff; }

.btn-tabla-editar   { background: linear-gradient(135deg, #d4870a, #f5a623); color: #fff; }
.btn-tabla-editar:hover { color: #fff; }

.btn-tabla-eliminar { background: linear-gradient(135deg, #c0392b, #e74c3c); color: #fff; }
.btn-tabla-eliminar:hover { color: #fff; }

.btn-tabla-detalle  { background: linear-gradient(135deg, #1a8a3e, #20c997); color: #fff; }
.btn-tabla-detalle:hover { color: #fff; }

.btn-tabla-notif    { background: linear-gradient(135deg, #6a0dad, #9c27b0); color: #fff; }
.btn-tabla-notif:hover { color: #fff; }

.btn-tabla-factura  { background: linear-gradient(135deg, #00695c, #00bcd4); color: #fff; }
.btn-tabla-factura:hover { color: #fff; }

.btn-tabla-pdf      { background: linear-gradient(135deg, #b71c1c, #ef5350); color: #fff; }
.btn-tabla-pdf:hover { color: #fff; }

/* Grupo de botones de tabla */
.btn-tabla-grupo {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 5px;
    align-items: center;
    justify-content: flex-start;
}

/* ──────────────────────────────────────────────────────
   BOTONES DE MÓDULO / ENCABEZADO
────────────────────────────────────────────────────── */
.btn-modulo-primary {
    background: rgba(255,255,255,0.18);
    color: #fff;
    border: 2px solid rgba(255,255,255,0.55);
    border-radius: var(--btn-radius-pill);
    padding: 9px 22px;
    font-size: 0.875rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    backdrop-filter: blur(6px);
    transition: var(--btn-transition);
    cursor: pointer;
    white-space: nowrap;
}
.btn-modulo-primary:hover {
    background: rgba(255,255,255,0.30);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0,0,0,0.20);
    text-decoration: none;
}

.btn-modulo-accent {
    background: #fff;
    color: #1e3c72;
    border: none;
    border-radius: var(--btn-radius-pill);
    padding: 9px 22px;
    font-size: 0.875rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(0,0,0,0.18);
    transition: var(--btn-transition);
    cursor: pointer;
    white-space: nowrap;
}
.btn-modulo-accent:hover {
    background: #f0f5ff;
    color: #1e3c72;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.22);
    text-decoration: none;
}

/* ──────────────────────────────────────────────────────
   BOTÓN CON CONTADOR / BADGE
────────────────────────────────────────────────────── */
.ds-btn-badge {
    position: relative;
}
.ds-btn-badge .badge-count {
    position: absolute;
    top: -6px;
    right: -6px;
    background: #e74c3c;
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    line-height: 1;
    border: 2px solid #fff;
    pointer-events: none;
}

/* ──────────────────────────────────────────────────────
   BOTÓN LOADING (estado de carga)
────────────────────────────────────────────────────── */
.ds-btn-loading {
    pointer-events: none;
    opacity: 0.75;
}
.ds-btn-loading::before {
    content: '';
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255,255,255,0.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: ds-spin 0.7s linear infinite;
    margin-right: 6px;
    flex-shrink: 0;
}
@keyframes ds-spin {
    to { transform: rotate(360deg); }
}

/* ──────────────────────────────────────────────────────
   GRUPO DE BOTONES (toolbar)
────────────────────────────────────────────────────── */
.ds-btn-group {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}
.ds-btn-group-sm { gap: 5px; }
.ds-btn-group-lg { gap: 12px; }

/* ──────────────────────────────────────────────────────
   BOTÓN FLOTANTE (FAB)
────────────────────────────────────────────────────── */
.ds-fab {
    position: fixed;
    bottom: 28px;
    right: 28px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    color: #fff;
    background: linear-gradient(135deg, #1e3c72, #00b4d8);
    box-shadow: 0 6px 20px rgba(0,0,0,0.25);
    transition: var(--btn-transition);
    z-index: 990;
    text-decoration: none;
}
.ds-fab:hover {
    transform: scale(1.1) translateY(-3px);
    box-shadow: 0 10px 28px rgba(0,0,0,0.30);
    color: #fff;
}

/* ──────────────────────────────────────────────────────
   OVERRIDES PARA BOTONES BOOTSTRAP existentes
   (Para uniformidad visual sin romper el código viejo)
────────────────────────────────────────────────────── */
.btn-enhanced {
    border-radius: var(--btn-radius) !important;
    font-weight: 600 !important;
    transition: var(--btn-transition) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    box-shadow: var(--btn-shadow) !important;
    border: none !important;
}
.btn-enhanced:hover {
    transform: translateY(-2px) !important;
    box-shadow: var(--btn-shadow-hover) !important;
}
.btn-enhanced:active {
    transform: scale(0.97) !important;
    box-shadow: var(--btn-shadow-active) !important;
}

/* ══════════════════════════════════════════════════════
   OVERRIDES GLOBALES PARA BOTONES BOOTSTRAP ESTÁNDAR
   Mejora automática de btn-primary, btn-success, etc.
   sin necesidad de cambiar cada template
══════════════════════════════════════════════════════ */

/* Base compartida */
.btn {
    border-radius: 10px !important;
    font-weight: 600 !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    letter-spacing: 0.2px !important;
}
.btn:hover  { transform: translateY(-2px) !important; }
.btn:active { transform: scale(0.97) !important; }
.btn:focus  { box-shadow: 0 0 0 3px rgba(255,255,255,0.4) !important; }

/* btn-primary */
.btn-primary, .btn-primary:not(:disabled) {
    background: linear-gradient(135deg, #1e3c72, #2a5298, #00b4d8) !important;
    border-color: transparent !important;
    color: #fff !important;
    box-shadow: 0 4px 14px rgba(30,60,114,0.30) !important;
}
.btn-primary:hover { box-shadow: 0 8px 22px rgba(0,180,216,0.35) !important; }

/* btn-success */
.btn-success, .btn-success:not(:disabled) {
    background: linear-gradient(135deg, #1a8a3e, #20c997) !important;
    border-color: transparent !important;
    color: #fff !important;
    box-shadow: 0 4px 14px rgba(32,201,151,0.28) !important;
}
.btn-success:hover { box-shadow: 0 8px 22px rgba(32,201,151,0.38) !important; }

/* btn-danger */
.btn-danger, .btn-danger:not(:disabled) {
    background: linear-gradient(135deg, #c0392b, #e74c3c) !important;
    border-color: transparent !important;
    color: #fff !important;
    box-shadow: 0 4px 14px rgba(231,76,60,0.28) !important;
}
.btn-danger:hover { box-shadow: 0 8px 22px rgba(231,76,60,0.38) !important; }

/* btn-warning */
.btn-warning, .btn-warning:not(:disabled) {
    background: linear-gradient(135deg, #d4870a, #f5a623) !important;
    border-color: transparent !important;
    color: #fff !important;
    box-shadow: 0 4px 14px rgba(245,166,35,0.28) !important;
}
.btn-warning:hover { box-shadow: 0 8px 22px rgba(245,166,35,0.38) !important; color: #fff !important; }

/* btn-info */
.btn-info, .btn-info:not(:disabled) {
    background: linear-gradient(135deg, #0277bd, #29b6f6) !important;
    border-color: transparent !important;
    color: #fff !important;
    box-shadow: 0 4px 14px rgba(41,182,246,0.28) !important;
}
.btn-info:hover { box-shadow: 0 8px 22px rgba(41,182,246,0.38) !important; color: #fff !important; }

/* btn-secondary */
.btn-secondary, .btn-secondary:not(:disabled) {
    background: linear-gradient(135deg, #495057, #6c757d) !important;
    border-color: transparent !important;
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(73,80,87,0.25) !important;
}
.btn-secondary:hover { box-shadow: 0 8px 20px rgba(73,80,87,0.35) !important; }

/* btn-dark */
.btn-dark, .btn-dark:not(:disabled) {
    background: linear-gradient(135deg, #1a1a2e, #2c3e50) !important;
    border-color: transparent !important;
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(44,62,80,0.30) !important;
}
.btn-dark:hover { box-shadow: 0 8px 20px rgba(44,62,80,0.40) !important; }

/* btn-light */
.btn-light, .btn-light:not(:disabled) {
    background: linear-gradient(135deg, #f8f9fa, #e9ecef) !important;
    border-color: rgba(0,0,0,0.06) !important;
    color: #1e3c72 !important;
    box-shadow: 0 3px 10px rgba(0,0,0,0.10) !important;
}
.btn-light:hover { color: #1e3c72 !important; box-shadow: 0 6px 18px rgba(0,0,0,0.15) !important; }

/* Outlines */
.btn-outline-primary  { border-radius: 10px !important; border-width: 2px !important; font-weight: 600 !important; }
.btn-outline-success  { border-radius: 10px !important; border-width: 2px !important; font-weight: 600 !important; }
.btn-outline-danger   { border-radius: 10px !important; border-width: 2px !important; font-weight: 600 !important; }
.btn-outline-warning  { border-radius: 10px !important; border-width: 2px !important; font-weight: 600 !important; }
.btn-outline-info     { border-radius: 10px !important; border-width: 2px !important; font-weight: 600 !important; }
.btn-outline-secondary{ border-radius: 10px !important; border-width: 2px !important; font-weight: 600 !important; }
.btn-outline-dark     { border-radius: 10px !important; border-width: 2px !important; font-weight: 600 !important; }
.btn-outline-light    { border-radius: 10px !important; border-width: 2px !important; font-weight: 600 !important; }

/* Tamaños Bootstrap */
.btn-sm { padding: 6px 14px !important; font-size: 0.8rem !important; border-radius: 8px !important; }
.btn-lg { padding: 12px 28px !important; font-size: 1rem !important; border-radius: 12px !important; }

/* Pill Bootstrap */
.btn.rounded-pill { border-radius: 50px !important; }

/* Botones deshabilitados */
.btn:disabled, .btn.disabled {
    opacity: 0.55 !important;
    transform: none !important;
    pointer-events: none !important;
}

/* ── Botones en formularios de confirmación / eliminar ── */
.confirm-btn, .delete-btn {
    border-radius: 10px !important;
    font-weight: 600 !important;
    padding: 10px 24px !important;
    transition: all 0.28s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

/* ── Dark mode overrides para btn estándar ── */
body.dark-mode .btn-light {
    background: linear-gradient(135deg, #2c3e50, #34495e) !important;
    color: #ecf0f1 !important;
    border-color: rgba(255,255,255,0.1) !important;
}
body.dark-mode .btn-outline-light {
    border-color: rgba(255,255,255,0.5) !important;
    color: rgba(255,255,255,0.85) !important;
}
body.dark-mode .btn-outline-secondary {
    border-color: rgba(255,255,255,0.35) !important;
    color: rgba(255,255,255,0.8) !important;
}

/* ══════════════════════════════════════════════════════
   NUEVAS UTILIDADES PREMIUM v3.0
══════════════════════════════════════════════════════ */

/* ── Botón Glassmorfismo ── */
.ds-btn-glass {
    background: rgba(255,255,255,0.15) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1.5px solid rgba(255,255,255,0.35) !important;
    color: #fff !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.2) !important;
}
.ds-btn-glass:hover {
    background: rgba(255,255,255,0.25) !important;
    border-color: rgba(255,255,255,0.5) !important;
    color: #fff !important;
}

/* ── Botón con efecto Pulse (para alertas urgentes) ── */
.ds-btn-pulse {
    animation: ds-pulse-anim 2s infinite;
}
@keyframes ds-pulse-anim {
    0%   { box-shadow: 0 0 0 0 rgba(231, 76, 60, 0.55); }
    70%  { box-shadow: 0 0 0 10px rgba(231, 76, 60, 0); }
    100% { box-shadow: 0 0 0 0 rgba(231, 76, 60, 0); }
}
.ds-btn-pulse-blue {
    animation: ds-pulse-blue 2s infinite;
}
@keyframes ds-pulse-blue {
    0%   { box-shadow: 0 0 0 0 rgba(30, 60, 114, 0.55); }
    70%  { box-shadow: 0 0 0 10px rgba(30, 60, 114, 0); }
    100% { box-shadow: 0 0 0 0 rgba(30, 60, 114, 0); }
}

/* ── Botón gradiente animado ── */
.ds-btn-gradient-animate {
    background-size: 200% 200%;
    animation: ds-gradient-shift 3s ease infinite;
}
@keyframes ds-gradient-shift {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
.ds-btn-primary.ds-btn-gradient-animate {
    background: linear-gradient(270deg, #1e3c72, #2a5298, #00b4d8, #0277bd) !important;
    background-size: 300% 300%;
}

/* ── Botón tipo "chip / etiqueta" ── */
.ds-btn-chip {
    padding: 5px 14px !important;
    font-size: 0.75rem !important;
    border-radius: 50px !important;
    font-weight: 700 !important;
    letter-spacing: 0.4px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.12) !important;
}

/* ── Botón de icono circular ── */
.ds-btn-circle {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1rem !important;
    gap: 0 !important;
}
.ds-btn-circle.ds-btn-sm { width: 32px !important; height: 32px !important; min-width: 32px !important; font-size: 0.82rem !important; }
.ds-btn-circle.ds-btn-lg { width: 52px !important; height: 52px !important; min-width: 52px !important; font-size: 1.2rem !important; }

/* ── Botón con borde inferior (underline style) ── */
.ds-btn-underline {
    background: transparent !important;
    border: none !important;
    border-bottom: 2px solid currentColor !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 4px 2px !important;
    font-weight: 600 !important;
    color: #2a5298 !important;
    transition: color 0.2s ease, border-color 0.2s ease !important;
}
.ds-btn-underline:hover {
    color: #00b4d8 !important;
    border-bottom-color: #00b4d8 !important;
    transform: none !important;
    box-shadow: none !important;
}

/* ── Variante ROSE / PINK ── */
.ds-btn-rose {
    background: linear-gradient(135deg, #be185d, #ec4899);
    color: #fff;
}
.ds-btn-rose:hover { color: #fff; box-shadow: 0 8px 24px rgba(236,72,153,0.35); }

/* ── Variante INDIGO ── */
.ds-btn-indigo {
    background: linear-gradient(135deg, #312e81, #6366f1);
    color: #fff;
}
.ds-btn-indigo:hover { color: #fff; box-shadow: 0 8px 24px rgba(99,102,241,0.35); }

/* ── Botón con ícono a la derecha (flecha) ── */
.ds-btn-arrow::after {
    content: ' →';
    transition: transform 0.2s ease, margin 0.2s ease;
    display: inline-block;
    margin-left: 2px;
}
.ds-btn-arrow:hover::after {
    transform: translateX(4px);
    margin-left: 6px;
}

/* ── Tooltip integrado en botón ── */
.ds-btn[data-tooltip] {
    position: relative;
}
.ds-btn[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: #1a202c;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 500;
    padding: 5px 10px;
    border-radius: 6px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: 1000;
    left: 130%;
    transform: none;
}
.ds-btn[data-tooltip]:hover::after {
    opacity: 1;
    transform: none;
    left: 50%;
    transform: translateX(-50%);
}

/* ── Dark Mode - Ajustes para nuevas variantes ── */
body.dark-mode .ds-btn-glass {
    background: rgba(255,255,255,0.08) !important;
    border-color: rgba(255,255,255,0.2) !important;
}
body.dark-mode .ds-btn-light {
    background: linear-gradient(135deg, #2a3346, #313d50) !important;
    color: #c5d5e8 !important;
}
body.dark-mode .ds-btn-underline { color: #4dabf7 !important; border-bottom-color: #4dabf7 !important; }
body.dark-mode .ds-btn-underline:hover { color: #22b8cf !important; border-bottom-color: #22b8cf !important; }

/* ── Mejora de btn-modulo en dark mode ── */
body.dark-mode .btn-modulo-accent {
    background: rgba(255,255,255,0.12) !important;
    color: #e8f4ff !important;
    border: 1px solid rgba(255,255,255,0.25) !important;
}
body.dark-mode .btn-modulo-accent:hover {
    background: rgba(255,255,255,0.22) !important;
    color: #fff !important;
}

/* ── Responsive: evitar que botones sean muy pequeños en móvil ── */
@media (max-width: 576px) {
    .ds-btn { min-height: 38px; padding: 8px 16px; }
    .ds-btn-sm { min-height: 32px; }
    .btn-tabla { width: 34px !important; height: 34px !important; font-size: 0.78rem !important; }
    .btn-tabla-grupo { gap: 4px !important; }
}

/* ── Animación de entrada para botones de acción ── */
@keyframes ds-btn-pop {
    0%   { transform: scale(0.8); opacity: 0; }
    70%  { transform: scale(1.05); opacity: 1; }
    100% { transform: scale(1); }
}
.ds-btn-pop { animation: ds-btn-pop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }