/* ======================================
   ESTILOS ESTÁNDAR DE BOTONES CIMSPARE
   Para usar en todo el proyecto
   ====================================== */

/* Botón principal azul (para acciones principales) */
.btn-primary-cimspare {
    background: linear-gradient(135deg, #3182ce 0%, #2c5282 100%) !important;
    color: white !important;
    padding: 8px 24px !important;
    border-radius: 6px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    transition: all 0.2s ease !important;
    border: none !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
}

.btn-primary-cimspare:hover {
    background: linear-gradient(135deg, #2c5282 0%, #2a4365 100%) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(49, 130, 206, 0.3) !important;
}

.btn-primary-cimspare:active {
    transform: translateY(0px) !important;
}

/* Botón secundario verde (para envío de emails, confirmaciones) */
.btn-success-cimspare {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    color: white !important;
    padding: 8px 24px !important;
    border-radius: 6px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    transition: all 0.2s ease !important;
    border: none !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
}

.btn-success-cimspare:hover {
    background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3) !important;
}

/* Botón de cancelar/secundario gris */
.btn-secondary-cimspare {
    background-color: #6b7280 !important;
    color: white !important;
    padding: 8px 24px !important;
    border-radius: 6px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    transition: all 0.2s ease !important;
    border: none !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
}

.btn-secondary-cimspare:hover {
    background-color: #4b5563 !important;
    transform: translateY(-1px) !important;
}

/* Botón de peligro rojo (para eliminar) */
.btn-danger-cimspare {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
    color: white !important;
    padding: 8px 24px !important;
    border-radius: 6px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    transition: all 0.2s ease !important;
    border: none !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
}

.btn-danger-cimspare:hover {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3) !important;
}

/* Botón pequeño para acciones secundarias */
.btn-small-cimspare {
    padding: 6px 12px !important;
    font-size: 12px !important;
    border-radius: 4px !important;
}

/* Botón grande para acciones importantes */
.btn-large-cimspare {
    padding: 12px 32px !important;
    font-size: 16px !important;
    border-radius: 8px !important;
}

/* Botón con icono */
.btn-icon-cimspare i {
    margin-right: 8px !important;
}

/* Botón solo icono */
.btn-icon-only-cimspare {
    padding: 8px !important;
    width: 40px !important;
    height: 40px !important;
    justify-content: center !important;
}

/* Estados deshabilitado */
.btn-primary-cimspare:disabled,
.btn-success-cimspare:disabled,
.btn-secondary-cimspare:disabled,
.btn-danger-cimspare:disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    transform: none !important;
}

.btn-primary-cimspare:disabled:hover,
.btn-success-cimspare:disabled:hover,
.btn-secondary-cimspare:disabled:hover,
.btn-danger-cimspare:disabled:hover {
    transform: none !important;
    box-shadow: none !important;
}

/* ======================================
   EJEMPLOS DE USO:
   
   Botón Principal:
   CssClass="btn-primary-cimspare"
   
   Botón Enviar Email:
   CssClass="btn-success-cimspare btn-large-cimspare btn-icon-cimspare"
   
   Botón Cancelar:
   CssClass="btn-secondary-cimspare"
   
   Botón Eliminar:
   CssClass="btn-danger-cimspare"
   ====================================== */